1.前言

在学习vue的时候，动词更改img图片路径的时候，遇到很多问题，记录下来以供参考

2.一般情况

直接写路径没有问题：

<template><div><img src="../static/upload/slyline.jpg" alt="" /></div>
</template><script>
export default {data() {return {imgSrc: "../static/upload/slyline.jpg",};},
};
</script><style>
</style>

但是更多时候是根据图片路径动态渲染图片，所以要用动态的方法。

3.问题

1、直接绑定

代码如下：

<template><img :src="imgSrc" alt="" />
</template><script>
export default {data() {return {imgSrc: "../static/upload/slyline.jpg",};}
};
</script>
<style>
</style>

结果（直接拿赋值）：

所以这方法不行

2.require引入

代码如下：

<template><div><img :src="imgSrc" alt="" /></div>
</template><script>
export default {data() {return {imgSrc: "",};},mounted() {var src = "../static/upload/slyline.jpg";this.imgSrc = require(src);},
};
</script><style>
</style>

但这样会报错：

必须这样写引入：

<template><div><img :src="imgSrc" alt="" /></div>
</template><script>
export default {data() {return {imgSrc: "",};},mounted() {var src = "slyline.jpg";this.imgSrc = require("../static/upload/" + src);},
};
</script><style>
</style>

结果：

引入同样的字符，但必须要绕一下，真奇怪。懂的在评论区留言。

我的文件路径

vue动态加载图片问题相关推荐

vue 动态加载图片路径报错解决方法
vue 动态加载图片路径报错解决方法参考文章: (1)vue 动态加载图片路径报错解决方法 (2)https://www.cnblogs.com/qingcui277/p/8930507.html ...
vue+elementui 中src动态加载图片的时候不起作用
vue+elementui 中src动态加载图片的时候不起作用代码如下: <el-table-column align="center" label="宠物图片& ...
vue 动态获取的图片路径不显示_解决Vue动态加载本地图片问题
最近遇到了个问题,用v-bind动态绑定img的src,图片加载不出来.控制台显示src是有获取到图片地址的,可是就是加载不出来. 最后才发现原因原来是浏览器中直接显示'./img/img1.png' ...
viewer动态加载图片第一次点击预览图片失败的问题
如果您搜到这篇文章的话,那估计您遇到跟我一样的问题了. 众所周知,每一个插件都有很多坑,比如说市面上比较火爆的图片浏览插件viewer,有js版本和jqery版本的,尽管这两个版本不一样,但是大同小 ...
Delphi FastReport动态加载图片
Delphi FastReport动态加载图片 2011-01-06 作者:李海彬阅读:684 以前用FastReport制作报表,从来没有打印过图片,这段时间做了个打印个人简历的 ...
render注册一个链接组件_详解vue 动态加载并注册组件且通过 render动态创建该组件...
基于 iview Tabs 组件实现功能:为每个 tab 动态创建不同的.特定的组件内容,而不需要大量的 import 组件并进行 component 注册 Index.vue import loa ...
jQuery页面滚动动态加载图片等元素
相信大家见过好多随着页面滚动,动态加载图片等元素的网站,我也是,以前见了好多,只是没时间去研究,今天晚上有空,百度了一下找了一个jquery插件,作者张鑫旭,效果挺好,代码也很简单,使用更方便,废话不 ...
解决问题：swiper动态加载图片后无法滑动
解决问题:swiper动态加载图片后无法滑动参考文章: (1)解决问题:swiper动态加载图片后无法滑动 (2)https://www.cnblogs.com/yangguoe/p/9857398 ...
render vue 添加类_详解vue 动态加载并注册组件且通过 render动态创建该组件
基于 iview Tabs 组件实现功能:为每个 tab 动态创建不同的.特定的组件内容,而不需要大量的 import 组件并进行 component 注册 Index.vue import loa ...

vue动态加载图片问题

文章目录

1.前言

2.一般情况

3.问题

1、直接绑定

2.require引入

vue动态加载图片问题相关推荐

最新文章

热门文章