Nuxt v-bind绑定img src不显示的解决
更新时间：2019年12月05日 11:28:36 作者：KASON
这篇文章主要介绍了Nuxt v-bind绑定img src不显示的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
问题：
使用v-for循环， :src="item.url"，绑定图片无法显示，只能写成静态结构；
原因：
直接写成静态的，会经过webpack进行编译，从而得到打包后正确的图片真实路径。
如果你写成动态的，webpack就不会进行编译，原封不动的把'~/assets/img/home.png' 放到你图片的src里面，'http://xxx.xxx.xxx/~/assets/i...'不存在这张图片！
解决方法1：
把图片存在服务器，使用网络路径，
解决方法2：
使用require和相对路径引用图片
{ src: require("../static/gzEducation/fl/1.png") }
//跳出1层还是2层目录，根据自己的所在位置来决定
data中的数据：
data() {
return {
flList: [
{ src: require("../static/gzEducation/fl/1.png") },
],
}
vue循环结构：
<section > <div class="item"v-for="(item,index) in flList" :key="index"> <img :src="item.src" alt="背景图片"> </div> </section>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了JavaScript的内置对象Math和字符串，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
JavaScript获取图片像素颜色并转换为box-shadow显示
这篇文章主要介绍了JavaScript获取图片像素颜色并转换为box-shadow显示的方法,用到了HTML5中的FileReader API和getImageData,转换为的CSS3 box-shadow也要注意浏览器的兼容问题,需要的朋友可以参考下2016-03-03
Bootstrap是Twitter 于2010年开发出来的前端框架，用过的同学应该知道，这款前端框架不仅界面很美观，而且兼容了很多的浏览器，大大加速了我们开发网站的速度，本文给大家介绍基于Bootstrap扁平化的后台框架Ace，需要的朋友参考下2015-11-11
layui之table checkbox初始化时选中对应选项的方法
今天小编就为大家分享一篇layui之table checkbox初始化时选中对应选项的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
Firefox getBoxObjectFor getBoundingClientRect联系
Firefox在含有flash的网页上提示：不建议使用 getBoxObjectFor() 。 请使用 element.getBoundingClientRect()。2008-10-10
Javascript中检查数据类型一直是老生常谈的问题,类型判断在web开发中也有着非常广泛的应用,所以下面这篇文章主要给大家介绍了关于JS数据类型检测的那些事,需要的朋友可以参考下2021-09-09
网站一般都有访问量统计工具，比较高效实用的工具多种多样，这篇文章主要介绍了javascript精确统计网站访问量实例代码，感兴趣的小伙伴们可以参考一下2015-12-12
JavaScript是一种无类型语言，但同时JavaScript提供了一种灵活的自动类型转换的处理方式。基本规则是，如果某个类型的值用于需要其他类型的值的环境中，JavaScript就自动将这个值转换成所需要的类型。2016-07-07
这篇文章主要介绍了微信小程序基于movable-view实现滑动删除效果,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-01-01
javascript之AJAX框架使用说明,需要的朋友可以参考下.`2010-04-04
最新评论