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 option location 页面跳转实现代码
Dec 27 Javascript
JavaScript中的apply()方法和call()方法使用介绍
Jul 25 Javascript
jquery批量控制form禁用的代码
Aug 06 Javascript
让angularjs支持浏览器自动填表
Nov 10 Javascript
jQuery中Ajax的load方法详解
Jan 14 Javascript
JavaScript比较两个对象是否相等的方法
Feb 06 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 Javascript
快速解决brew安装特定版本flow的问题
May 17 Javascript
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
vue自定义指令限制输入框输入值的步骤与完整代码
Aug 30 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+mysql保存和输出文件
2006/10/09 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
laravel通过a标签从视图向控制器实现传值
2019/10/15 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
popdiv
2006/07/14 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
mui back 返回刷新页面的实例
2017/12/06 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
Python中isnumeric()方法的使用简介
2015/05/19 Python
python中函数总结之装饰器闭包详解
2016/06/12 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
党员一句话承诺大全
2014/03/28 职场文书
贷款担保申请书
2014/05/20 职场文书
综艺节目策划方案
2014/06/13 职场文书
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
导游词开场白
2015/01/31 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
centos8安装nginx1.9.1的详细过程
2021/08/02 Servers
Java spring定时任务详解
2021/10/05 Java/Android
python基础之//、/与%的区别详解
2022/06/10 Python