解决Vue动态加载本地图片问题
更新时间：2019年10月09日 10:38:03 作者：ManLeE
这篇文章主要介绍了Vue如何动态加载本地图片的相关知识，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
最近遇到了个问题，用v-bind动态绑定img的src，图片加载不出来。控制台显示src是有获取到图片地址的，可是就是加载不出来。
最后才发现原因原来是浏览器中直接显示'./img/img1.png'，也就是没有经过编译的步骤，直接将获取到的数据当作字符串显示。
解决方法：
1.在当前界面全局import图片地址
//使用import引入
import img1 from './img/img1.png'
import img2 from './img/img2.png'
export default {
data() {
return {
imgList[
{
id: 0,
imgUrl: img1
},
{
id: 1,
imgUrl: img2
}
]
}
}
}
在Html中使用
<img v-for="item in imgList" :key="item.id" :src="imgUrl" />
2.使用require
用第一种方法可能会很繁琐，数据多的时候就不好一个一个import了，此时用require动态加载
getImage() {
this.imgList.forEach(item => {
item.imgUrl = require('./img/' + item.name + '.png')
})
}
data里的数据（此方法就不用再import啦）
data() {
return {
imgList[
{
id: 0,
name: 'img1',
imgUrl: ''
},
{
id: 1,
name: 'img2',
imgUrl: ''
}
]
}
}
以上方法就可以解决图片动态绑定后不能显示的问题啦，视频同理哟！
总结
以上所述是小编给大家介绍的解决Vue动态加载本地图片问题,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
这篇文章主要介绍了Vue中直接操作数组索引不奏效的问题解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue页面params传值的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
vue+elementUI封装一个根据后端变化的动态table(完整代码)
这篇文章主要介绍了vue+elementUI,封装一个根据后端变化的动态table,实现了自动生成和插槽两个方式，主要把el-table 和el-pagination封装在一起，结合示例代码给大家介绍的非常详细，需要的朋友可以参考下2022-08-08
Vue 的 keep-alive 是一个内置组件,用于缓存不活动的组件实例,避免重复渲染,从而优化应用性能,下面就跟随小编一起来看看其核心实现原理和缓存内容吧2025-03-03
这篇文章主要给大家介绍了关于vue动态设置页面title的相关资料，文中通过实例代码结束的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2020-08-08
这篇文章主要介绍了vue项目配置代理如何解决跨域问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要为大家详细介绍了vue教程之toast弹框全局调用示例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要为大家详细介绍了vue实现移动端原生小球滑块，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家详细介绍了如何基于Vue.js实现一个可选择不连续的时间范围的日期选择器，文中的示例代码简洁易懂，需要的可以参考一下2023-06-06
详解为什么Vue中不要用index作为key(diff算法)
这篇文章主要介绍了详解为什么Vue中不要用index作为key(diff算法)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
最新评论