Nuxt v-bind绑定img src不显示的解决


Posted in Javascript onDecember 05, 2019

问题:

使用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 相关文章推荐
通过js脚本复制网页上的一个表格的不错实现方法
Dec 29 Javascript
jquery获得option的值和对option进行操作
Dec 13 Javascript
JavaScript表单通过正则表达式验证电话号码
Mar 14 Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
js数组的操作指南
Dec 28 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 Javascript
layui表格checkbox选择全选样式及功能的实例
Mar 07 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 #Javascript
微信小程序顶部导航栏可滑动并选中放大
Dec 05 #Javascript
微信小程序实现点击按钮后修改颜色
Dec 05 #Javascript
React 父子组件通信的实现方法
Dec 05 #Javascript
Javascript中的this,bind和that使用实例
Dec 05 #Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 #Javascript
Vue快速实现通用表单验证功能
Dec 05 #Javascript
You might like
Php图像处理类代码分享
2012/01/19 PHP
PHP设计模式 注册表模式
2012/02/05 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
Ruffy javascript 学习笔记
2009/11/30 Javascript
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
2016/01/06 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
[16:01]夜魇凡尔赛茶话会 第二期01:你比划我猜
2021/03/11 DOTA
以视频爬取实例讲解Python爬虫神器Beautiful Soup用法
2016/01/20 Python
Python比较配置文件的方法实例详解
2019/06/06 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
Python pandas库中的isnull()详解
2019/12/26 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
全天然狗零食:Best Bully Sticks
2016/09/22 全球购物
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
会计找工作求职信范文
2013/12/09 职场文书
军训生自我鉴定范文
2013/12/27 职场文书
农民致富事迹材料
2014/01/23 职场文书
美德好少年主要事迹
2014/01/29 职场文书
优秀员工评语
2014/02/10 职场文书
骨干教师培训方案
2014/05/06 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
机关作风整顿个人剖析材料
2014/10/06 职场文书
会议欢迎词
2015/01/23 职场文书
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL