如何在HBuilder uni-app中添加图片

Question

请问如何在HBuilder X 的uniapp中pages.json中的应用启动页中添加两个及以上的图片？

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

在HBuilder X的uni-app项目中，要在pages.json的应用启动页中添加两个或更多的图片，通常我们会用到项目中的静态资源目录来放置这些图片。这里给出一个大致的步骤，来展示如何在pages.json中配置这些图片：

步骤 1：放置图片到静态资源目录

首先，将你的图片放到项目的静态资源目录中。这个目录通常是项目的根目录下的static文件夹。例如，你可以放置图片到static/images文件夹中。

步骤 2：配置pages.json中的启动页

在pages.json文件中配置你的页面和相关的资源路径。对于启动页的配置，如果你使用的是自定义的启动页面（非uni-app内置页面），可以在页面路径中指定图片资源。但是要注意，通常启动页是应用首次启动时显示的页面，并且它的显示方式和内容由应用开发者自定义。因此，你可能需要创建一个简单的页面来展示这些图片。

例如，假设你有一个名为launchPage的页面用来展示启动图片，你可以这样配置：

{
  "pages": [
    {
      "path": "pages/launchPage/launchPage", // 启动页的路径
      "style": { // 页面样式配置
        // 这里可以配置页面的其他样式属性，如果需要展示图片可以使用image标签在页面中引用静态资源路径的图片
      }
    },
    // 其他页面的配置...
  ],
  // 其他配置...
}

在这个配置中，你需要创建一个launchPage页面来展示你的启动图片。在该页面的.vue文件中，你可以使用<image>标签来展示图片。例如：

<!-- launchPage.vue -->
<template>
  <view class="container">
    <!-- 添加多个图片 -->
    <image class="launch-image" src="/static/images/image1.png"></image> <!-- 使用项目的静态资源路径 -->
    <image class="launch-image" src="/static/images/image2.png"></image> <!-- 使用项目的静态资源路径 -->
  </view>
</template>

在这个例子中，/static/images/image1.png和/static/images/image2.png是你之前放置在静态资源目录中的图片路径。请确保这些路径是正确的并且图片文件存在。此外，你也可以在CSS中为<image>标签添加样式来控制图片的显示方式。例如设置位置、大小等。

步骤 3：运行和测试应用

完成以上步骤后，你可以运行uni-app项目并测试启动页是否正常显示你的图片。请注意确保图片资源的路径是正确的，否则可能会导致页面无法加载或显示错误。此外，由于不同平台（如Android和iOS）可能有不同的启动页展示方式和限制，你可能需要根据目标平台进行相应的调整和优化。