Vue项目动态加载图片正确写法
更新时间：2024年04月02日 10:38:36 作者：GuoyeZhang
最近做项目的时候遇到了动态加载图片的需求,所以这里给大家总结下,这篇文章主要给大家介绍了关于Vue项目动态加载图片的正确写法,文中通过代码介绍的非常详细,需要的朋友可以参考下
1. 错误的写法
以下情况运行异常，图片加载不出来
<img class="img" :src="imgSrc" /> <script> let imgSrc = '../../assets/img1.png'; </script>
2. 正确的实践写法
方法 1
这时候需要换个写法，让编译时把图片加上去一起处理
原因：编译时webpack会将图片当成模块加载使用。然而上面第 1 点是动态的，loader无法解析图片路径，所以编译规则处理不了，所以加载时会找不到图片。
<img class="img" :src="imgSrc" /> <script> import img1 from '../../assets/img1.png' let imgSrc = img1; </script>
方法2
把图片资源放到静态目录下static，引用的时候就直接是固定地址进行引用
assets和static的区别：
assets：在项目编译的过程会被webpack处理解析为模块依赖，只支持相对路径的形式。
static：在static这个目录下文件不会被webpack处理和解析，webpack直接复制到最终的打包目录dist/static。必须使用绝对路径引用这些文件。
<img src="/static/img1.png" />
附：vue中动态加载图片路径
在vue中加载图片路径跟我们不用框架引入路径是不同，在页面中使用的话，写的路径是可以生效的，但是我们想动态加载图片路径的话是不生效的。
这里有两种方法来解决：
方法一：（推荐）
1、页面上，绑定动态路径：
<img :src=" imgUrl "/>
2、data里面：用 require(图片路径）
data(){
return{
imgUrl:require('@/assets/img/mind/mind_5.svg');
}
}方法二：
把图片放到static，然后相对路径获取图片就好了
src: '../../../../static/images/docx.png'
总结
到此这篇关于Vue项目动态加载图片正确写法的文章就介绍到这了,更多相关Vue动态加载图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
对Vue beforeRouteEnter 的next执行时机详解
今天小编就为大家分享一篇对Vue beforeRouteEnter 的next执行时机详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
今天小编就为大家分享一篇vue动画之点击按钮往上渐渐显示出来的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家介绍了vue开发中后台系统复杂表单的优化技巧，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
vue v-viewer组件使用示例详解(v-viewer轮播图)
这篇文章主要介绍了vue v-viewer组件使用示例详解(v-viewer轮播图),本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-02-02
这篇文章主要介绍了Vue+ ArcGIS JavaScript APi,文中需要注意ArcGIS JavaScript3.x 和ArcGIS JavaScript 4.x框架差异较大，本文从环境搭建开始到测试运行给大家讲解的非常详细，需要的朋友可以参考下2022-11-11![警告[vue-router] Duplicate named routes definition简单解决方法](//img.jbzj.com/images/xgimg/bcimg5.png)
警告[vue-router] Duplicate named routes definition简单解决方法
这篇文章主要关于介绍了警告[vue-router] Duplicate named routes definition的解决方法,这个错误提示是因为在Vue Router中定义了重复的路由名称,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了如何在vue3中同时使用tsx与setup语法糖，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
这篇文章主要介绍了vue引入组件的几种方法汇总,包括常用的局部引入,这里需要注意在哪个页面需要就在那个页面引入、注册、使用,本文结合示例代码给大家介绍的非常详细,需要的朋友参考下吧2023-10-10
在我们用vue时,我们经常用到一个方法是this.$nextTick,相信你也用过,我常用的场景是在进行获取数据后,需要对新视图进行下一步操作或者其他操作时,发现获取不到dom,这篇文章主要给大家介绍了关于$nextTick的相关资料,需要的朋友可以参考下2021-07-07
这篇文章主要介绍了Vue实战教程之仿肯德基宅急送App，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
![警告[vue-router] Duplicate named routes definition简单解决方法](http://img.jbzj.com/images/xgimg/bcimg5.png)
最新评论