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')"

完美解决:

也可以绑定数组:

 <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引用本地图片,但是我发现,我死活引用不上本地图片,老是找不到图片,试了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";
components: {
		[VanImage.name]: 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/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"},
],

对于路径问题

路径主要分为绝对路径和相对路径。

  • 绝对路径:你的主页上的文件或目录在硬盘上真正的路径。简单来说就是完整的描述文件位置的路径。
  • 相对路径:由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。简单来说就是相对与某个基准目录的路径。

相对路径的写法
` ./:代表目前所在的目录。
…/:代表上一层目录。
以/开头:代表根目录

对于相对路径的写法,我感觉我还要花不少时间去理解。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue调试工具没有Pinia模块的简单解决办法

    vue调试工具没有Pinia模块的简单解决办法

    Pinia是Vue的存储库,它允许您跨组件/页面共享状态,这篇文章主要给大家介绍了关于vue调试工具没有Pinia模块的简单解决办法,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2024-02-02
  • Vue中跨域及打包部署到nginx跨域设置方法

    Vue中跨域及打包部署到nginx跨域设置方法

    这篇文章主要介绍了Vue中跨域以及打包部署到nginx跨域设置方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • vue项目打包以及优化的实现步骤

    vue项目打包以及优化的实现步骤

    项目完成,我们会将项目进行上线,为了提升性能,我们往往会进行一些优化处理,本文主要介绍了vue项目打包以及优化的实现步骤,感兴趣的可以了解一下
    2021-07-07
  • Vue中 Vue.prototype使用详解

    Vue中 Vue.prototype使用详解

    本文将结合实例代码,介绍Vue中 Vue.prototype使用,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2021-07-07
  • vue-router跳转页面的方法

    vue-router跳转页面的方法

    本篇文章主要介绍了vue-router跳转页面的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • vue递归获取父元素的元素实例

    vue递归获取父元素的元素实例

    这篇文章主要介绍了vue递归获取父元素的元素实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vuex中的Mutations的具体使用方法

    Vuex中的Mutations的具体使用方法

    这篇文章主要介绍了Vuex中的Mutations的具体使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • vue如何将导航栏、顶部栏设置为公共页面

    vue如何将导航栏、顶部栏设置为公共页面

    这篇文章主要介绍了vue如何将导航栏、顶部栏设置为公共页面问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定

    Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定

    表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令v-model完成表单的数据双向绑定功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值。感兴趣的朋友跟随小编一起看看吧
    2019-04-04
  • vue实现在v-html的html字符串中绑定事件

    vue实现在v-html的html字符串中绑定事件

    今天小编就为大家分享一篇vue实现在v-html的html字符串中绑定事件,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10

最新评论