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 相关文章推荐
获取JavaScript用户自定义类的类名称的代码
Mar 08 Javascript
Ajax,UTF-8还是GB2312 eval 还是execScript
Nov 13 Javascript
密码强度检测效果实现原理与代码
Jan 04 Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
js清除input中type等于file的值域(示例代码)
Dec 24 Javascript
jquery实现网页查找功能示例分享
Feb 12 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
Angular学习笔记之angular的$filter服务浅析
Nov 12 Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 Javascript
如何在JS文件中获取Vue组件
Sep 16 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模板引擎SMARTY
2006/10/09 PHP
php curl_init函数用法
2014/01/31 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
php之可变变量的实例详解
2017/09/12 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
js 返回时间戳所对应的具体时间
2010/07/20 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
Node.js创建HTTP文件服务器的使用示例
2018/05/11 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
2019/09/11 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
基于Python的文件类型和字符串详解
2017/12/21 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
django使用JWT保存用户登录信息
2020/04/22 Python
python能在浏览器能运行吗
2020/06/17 Python
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
新闻专业个人求职信
2013/12/19 职场文书
大众服装店创业计划书范文
2014/01/01 职场文书
初中地理教学反思
2014/01/11 职场文书
自主招生推荐信范文
2014/05/10 职场文书
中层干部考核评语
2015/01/04 职场文书
综合实践活动报告
2015/02/05 职场文书
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL
MySQL transaction事务安全示例讲解
2022/06/21 MySQL