vant -i mage本地图片 无法显示
说下坑
正常 情况下都是这样写的，但是vant这个框架不 知道 怎么想的，居然加载不出来，花里胡哨。
文档也没有写怎么加载本地图片，到处挖坑。
如图：
此处省略一万句脏话。
<van-image
lazy-load
width="34rem"
h ei ght="8rem"
f IT ="cont ai n"
src=" .. /assets/ LOG o.png"
@click="toMikeRouter(index)"
>
<template v -s lot:loading>
<van-loading ty PE ="spinner" size="20" />
</template>
<template v-slot:error>加载失败</template>
</van-image>
解决办法
src属性绑定requeir（）方法
:src="require('assets/logo.png')"
完美解决：
也可以绑定数组：
<van-col
v-for="(value, index) in img List"
: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引用本地图片，但是我发现，我死活引用不上本地图片，老是找不到图片，试了n多方法，我真的是欲哭无泪啊。然后我又查了很多文档，发现还是木有用。简直了，一遇到调用图片的，我真的是瑟瑟发抖，害怕。
话不多说，进入正题。
一 开始 我是这么写的，对于路径问题，嗯，遵循不报找不到的错就好，至于原理，我还真没深究过。
<div class="boximg"> <img src="assets/hahaha.png"> </div> //反正这么写PC端出来的好好的，移动端就是不出来
我又查了vant 官方 帮助文档，官方文档对引用本地图片的常见问题的描述。
最后一顿操作猛如虎，终于整出来。
<van-image :src="require('assets/hhh.png')"/>
//再对组件进行引用，图片终于出来了。
//但是莫要忘了引用，忘了肯定也显示不出来
import {Image as VanImage} From "vant";
component s: {
[VanImage.n am e]: VanImage,
},
//至于为什么是vanImage我也没有深究，图片能出来我已经很感动了
引用多个图片，并将信息 存放 在数组中。样式可以自己设置。
<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中定义数组
imageList: [
{img:require('assets/tupia n1 .png'),title:"图片1"},
{img:require('assets/tupian2.png'),title:"图片2"},
{img:require('assets/tupian3.png'),title:"图片3"},
{img:require('assets/tupian4.png'),title:"图片4"},
],
对于路径问题
路径主要分为绝对路径和相对路径。
绝对路径：你的主页上的文件或目录在硬盘上真正的路径。 简单 来说就是完整的描述文件位置的路径。 相对路径：由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。简单来说就是相对与某个基准目录的路径。相对路径的写法
` ./：代表目前所在的目录。
&helli p; /：代表上一层目录。
以/开头：代表根目录
对于相对路径的写法，我感觉我还要花不少时间去理解。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
您可能感兴趣的 文章 : vue+vant使用图片预览功能ImagePreview的问题解决 vue中img或元素背景图片无法显示或路径错误的解决 vue页面图片不显示问题解决方案
总结
以上是 为你收集整理的 vant-image本地图片无法显示的解决方式 全部内容，希望文章能够帮你解决 vant-image本地图片无法显示的解决方式 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于vant-image本地图片无法显示的解决方式的详细内容...