uniapp image引用本地图片不显示问题

1. uniapp image引用本地图片不显示问题

  在uniapp 开发过程中采用image引入本地资源图片。

1.1. 相对路径和绝对路径问题

  在UniApp中开发微信小程序时，引入图片时，相对路径和绝对路径可能会有一些差异。这差异主要涉及到小程序和UniApp框架的文件结构、路径解析规则以及开发环境的不同。

1.1.1. 相对路径：

  相对路径是相对于当前文件的路径来引用资源的。例如，如果你的页面文件和图片文件位于同一目录下，你可以使用相对路径引用图片。 在小程序中，相对路径的解析可能会受到文件结构的影响，确保相对路径的正确性。相对路径通常是相对于当前文件的位置来解析的。
  在UniApp中，相对路径的解析也会受到框架的影响，因为UniApp将代码编译成小程序代码时可能会进行一些路径的转换。

`<!-- 相对路径示例 --> <image src="../images/example.jpg"></image>`

1.1.2. 绝对路径：

  绝对路径是从根目录开始的完整路径，不受文件结构的影响。在小程序中，通常是以 / 开头的路径。 UniApp会根据开发环境（如开发者工具、真机调试）进行路径的调整。在开发者工具中，绝对路径通常相对于项目根目录；在真机调试时，可能会有一些微信小程序的路径规范。

`<!-- 绝对路径示例 --> <image src="/images/example.jpg"></image>`

  确保图片路径的正确性很重要，可以通过以下方式来避免一些常见的问题：
  在UniApp的项目结构中，将图片文件放在特定的目录（如/static/目录）下，以确保路径的一致性。 在小程序开发者工具中，可以使用开发者工具提供的路径解析功能来验证路径是否正确。
  避免在路径中使用中文或特殊字符，以免出现编码问题。

1.2. 解决方案

  使用img标签要用绝对路径前面没有 ‘/’

<img class='item-img' :src="v.imgUrl" mode=""></img>
 

 {
          type: "swiperList",
          data: [
            { imgUrl: 'static/image/img/swiper4.jpg' },
            { imgUrl: 'static/image/img/swiper5.jpg' },
            { imgUrl: 'static/image/img/swiper6.jpg' },
          ]
      }

  而使用image标签时要使用相对路径或 绝对路径(前面有’/')

<image class='item-img' :src="v.imgUrl" mode=""></image >

{
      bigUrl: "static/image/img/Children.jpg",
      data: [
          { imgUrl: "../../static/image/img/Children1.jpg" },
          { imgUrl: "../../static/image/img/Children2.jpg" },
          { imgUrl: "../../static/image/img/Children3.jpg" }
      ]
},
 
//或绝对路径
{
      bigUrl: "static/image/img/Children.jpg",
      data: [
          { imgUrl: "/static/image/img/Children1.jpg" },
          { imgUrl: "/static/image/img/Children2.jpg" },
          { imgUrl: "/static/image/img/Children3.jpg" }
      ]
}