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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

简述冻结JS对象方法技术
本文主要介绍了冻结JS对象方法技术，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
script标签属性type与language使用选择
很多使用javascript的朋友都有着这样一个问题:script标签属性type与language使用应如何选择，为解决此疑惑，本文详细整理了一下，需要的朋友可以参考下
2012-12-12
微信小程序获取验证码60秒倒计时功能
这篇文章主要介绍了微信小程序获取验证码60秒倒计时模板,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-04-04
复制js对象方法(详解)
复制js对象方法，需要的朋友可以参考下
2013-07-07
uniapp中单选按钮的实现代码示例
uniapp官方虽然提供了uni-data-checkbox,含括了单选和多选框功能,但是它功能是在不能满足需求,下面这篇文章主要给大家介绍了关于uniapp中单选按钮的实现代码,需要的朋友可以参考下
2023-01-01
JS封装的模仿qq右下角消息弹窗功能示例
这篇文章主要介绍了JS封装的模仿qq右下角消息弹窗功能,涉及javascript事件响应、页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
2018-08-08
14 个折磨人的 JavaScript 面试题
这篇文章主要为大家详细介绍了14 个折磨人的 JavaScript 面试题，希望对大家有所帮助，感兴趣的小伙伴们可以参考一下
2016-08-08
JS实现页面加载完成之后自动刷新一次问题
这篇文章主要介绍了JS实现页面加载完成之后自动刷新一次问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-02-02
JS实现自动变化的导航菜单效果代码
这篇文章主要介绍了JS实现自动变化的导航菜单效果代码,涉及JavaScript基于定时函数触发页面元素属性动态变换的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-09-09
javascript使用中为什么10..toString()正常而10.toString()出错呢
在JavaScript中为什么10..toString()正常，而10.toString()出错呢？这个问题一直困扰着我，所抽时间搜集整理下，晒出来与大家分享感兴趣的朋友可以了解下，希望对你们有帮助
2013-01-01