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" }]
}