vant-image本地圖片無法顯示的解決方式

更新時間：2023年01月18日 09:50:14 作者：1234Wu

這篇文章主要介紹了vant-image本地圖片無法顯示的解決方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vant-image本地圖片無法顯示

說下坑

正常情況下都是這樣寫的，但是vant這個框架不知道怎么想的，居然加載不出來，花里胡哨。

文檔也沒有寫怎么加載本地圖片，到處挖坑。

如圖：

此處省略一萬句臟話。

	<van-image
            lazy-load
            width="34rem"
            height="8rem"
            fit="contain"
            src="../assets/logo.png"
            @click="toMikeRouter(index)"
          >
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
            <template v-slot:error>加載失敗</template>
	</van-image>

解決辦法

src屬性綁定requeir（）方法

:src="require('../assets/logo.png')"

完美解決：

也可以綁定數(shù)組：

 <van-col
          v-for="(value, index) in imgList"
          :key="index"
          span="8"
        >
 	<van-image
            width="8rem"
            height="8rem"
            fit="contain"
            :src="value"
          >
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
            <template v-slot:error>加載失敗</template>
      </van-image>
 </van-col>
 
//script(vue)
 data() {
    return {
      //圖片資源
      imgList: [
        require("../assets/icon_emeetnote_nor.png"),
        require("../assets/img_ai_buds01_nor.png")
      ]
    };
  },

vant爬坑引用本地圖片

最近因為項目需求要利用vant引用本地圖片，但是我發(fā)現(xiàn)，我死活引用不上本地圖片，老是找不到圖片，試了n多方法，我真的是欲哭無淚啊。然后我又查了很多文檔，發(fā)現(xiàn)還是木有用。簡直了，一遇到調(diào)用圖片的，我真的是瑟瑟發(fā)抖，害怕。

話不多說，進入正題。

一開始我是這么寫的，對于路徑問題，嗯，遵循不報找不到的錯就好，至于原理，我還真沒深究過。

<div class="boximg">
	<img src="../assets/hahaha.png">
</div>
//反正這么寫PC端出來的好好的，移動端就是不出來

我又查了vant官方幫助文檔，官方文檔對引用本地圖片的常見問題的描述。

最后一頓操作猛如虎，終于整出來。

<van-image :src="require('../../assets/hhh.png')"/>
//再對組件進行引用，圖片終于出來了。
//但是莫要忘了引用，忘了肯定也顯示不出來
import {Image as VanImage} from "vant";
components: {
		[VanImage.name]: VanImage,
    },
//至于為什么是vanImage我也沒有深究，圖片能出來我已經(jīng)很感動了

引用多個圖片，并將信息存放在數(shù)組中。樣式可以自己設(shè)置。

<div>
	<van-row>
	    <van-col span="6" v-for="(image, index) in imageList" :key="index" > 
			<div class="imgbox">
				<van-image :src="image.img" fit="cover"/>
			</div>
			<span>{{image.title}}</span>
		</van-col>
	</van-row>
</div>
//在data中定義數(shù)組
imageList: [
    {img:require('../../assets/tupian1.png'),title:"圖片1"},
    {img:require('../../assets/tupian2.png'),title:"圖片2"},
    {img:require('../../assets/tupian3.png'),title:"圖片3"},
    {img:require('../../assets/tupian4.png'),title:"圖片4"},
],