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 相关文章推荐
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 Javascript
jQuery根据纬度经度查看地图处理程序
May 08 Javascript
jQuery中:checkbox选择器用法实例
Jan 03 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
Nov 04 Javascript
js监听input输入框值的实时变化实例
Jan 26 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 Javascript
微信小程序 生成携带参数的二维码
Oct 23 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 07 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获取当前日期及本周一是几月几号的方法
2017/03/28 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
php post换行的方法
2020/02/03 PHP
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
JavaScript_object基础入门(必看篇)
2016/06/13 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
ionic 自定义弹框效果
2017/06/27 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
Python常见数据结构详解
2014/07/24 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
python 求10个数的平均数实例
2019/12/16 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
北美领先的智能产品购物网站:Wellbots
2018/06/11 全球购物
2014年内部审计工作总结
2014/12/09 职场文书
2019入党申请书格式
2019/06/25 职场文书
Javascript之datagrid查询详解
2021/09/15 Javascript
MySQL sql模式设置引起的问题
2022/05/15 MySQL