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>

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

赞 (0)

相关推荐

  • 解决Vue.js 2.0 有时双向绑定img src属性失败的问题

    错误用法: <img src="http:0.0.0.127/{{item.imgname}}" alt=""> 正确用法: <img src="'http:0.0.0.127/'+item.imgname" alt=""> 绑定属性的时候,前面加: 属性的值可以用表达式,但注意字符串拼接的时候要加引号 以上这篇解决Vue.js 2.0 有时双向绑定img src属性失败的问题就是小编分享给大家的全部内

  • Vue中img的src属性绑定与static文件夹实例

    Vue中img的src属性绑定与static文件夹实例

    不少人在vue的开发中遇到这样一个问题: img的src属性绑定url变量,然而图片加载失败. 大部分的情况中,是开发者使用了错误的写法,例如: <img src="{{ imgUrl }}"/> 这样写肯定是不对的,正确的写法应该使用v-bind: <img v-bind:src="imgUrl"/> 不过,有时候即使使用了正确的语法,依旧无法显示图片,因为你的imgUrl使用了本地图片的路径. 例如,有下面一个文件结构: 现在,我们要在A

  • 关于vue v-for循环解决img标签的src动态绑定问题

    在解决这个问题上,遇到了很多错误的方案,一直没有跑通,有些是图片标记出现了,但是图片内容没有出现,这就很让人头疼了,下面,我讲解我操作成功的案例吧. 1.目录结构如下 图片放置在与src同级的static文件夹下,在这里,我放置在slider中 2.数据配置如下: 注意引入的路径,直接从static文件中对应的地方引入. data () { return { product:[ { "src":'../../static/slider/logo1.jpg', "decerat

  • 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和

  • jQuery中的on与bind绑定事件区别实例详解

    on(events,[selector],[data],fn) events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" . selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代. data:当一个事件被触发时要传递event.data给事件处理函数. fn:该事件被触发时执行的函数. false 值也可以做一个函数的简写,返回false. bind(type,[data],fn) 为每

  • Vue中img的src是动态渲染时不显示的解决

    今天在项目中遇到一个需求,设计稿如下 就是展示用户头像,数据从后端获取,要是没有拿到则显示默认图片. 项目采用vue开发,本人也是第一次在实际项目中使用vue. 自然而然采用条件渲染,我的代码如下: 保存运行查看,发现没显示默认的图片,审查元素发现图片没有被打包 有点懵~ 后来查阅资料发现图片使用require引入即可,更改后代码为: 搞定~ 以上这篇Vue中img的src是动态渲染时不显示的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • C++中使用function和bind绑定类成员函数的方法详解

    定义一个普通的类 class Test1{ public: void fun(int val){ cout<<"hello world "<<val<<endl; } }; 开始第一个测试 int main(){ Test1 t; function<void(int)> pf = std::bind(&Test1::fun,t,2); pf(4); // return 0; } 输出的值是2,说明pf传进去的4并没有什么用,在bi

  • Ｃ++11 学习笔记之std::function和bind绑定器

    std::function C++中的可调用对象虽然具有比较统一操作形式(除了类成员指针之外,都是后面加括号进行调用),但定义方法五花八门.为了统一泛化函数对象,函数指针,引用函数,成员函数的指针的各种操作,让我们可以按更统一的方式写出更加泛化的代码,C++11推出了std::function. std::function是可调用对象的包装器.它是一个类模板,可以容纳除了类成员(函数)指针之外的所有可调用对象.通过指定它的模板参数,它可以用统一的方式处理函数,函数对象,函数指针,并允许保存和延迟

  • C++11中bind绑定器和function函数对象介绍

    C++11中bind绑定器和function函数对象介绍

    目录 一. bind1st和bind2nd 1.C++ STL中的绑定器 2.bind1st和bind2nd的底层原理实现 二. 模板的完全特例化和非完全特例化 三. function函数对象 四. bind和function实现线程池 五. lambda表达式 1.lambda表达式的实现原理 2.lambda表达式的应用实践 一. bind1st和bind2nd 1.C++ STL中的绑定器 bind1st:operator()的第一个形参变量绑定成一个确定的值 bind2nd:operat

  • 关于动态生成dom绑定事件失效的原因及解决方法

    之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试了一下: 1. 事件失效的原因: (1)bind事件绑定只对dom中存在的元素有效,对于我们后来动态增加的元素是监测不到,所以绑定不了 (2)同样,当你使用var aa = document.getElementsByTagName("动态生成的元素");来获取动态生成的元素的时候也是获取

  • Android 百度地图marker中图片不显示的解决方法(推荐)

    Android 百度地图marker中图片不显示的解决方法(推荐)

    目的: 根据提供的多个经纬度,显示所在地的marker样式,如下: 问题: 1.发现marker中在线加载的图片无法显示出来: 2.获取多个对象后,却只显示出了一个marker: 以下为官网实现方法: 通过查阅百度官网的文档,我们可以知道,地图标注物的实现方法如下: //定义Maker坐标点 LatLng point = new LatLng(39.963175, 116.400244); //构建Marker图标 BitmapDescriptor bitmap = BitmapDescript

  • LayUI动态设置checkbox不显示的解决方法

    1.页面引入layui.js和layui.css <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>手机银行权限配置</title> <link type="text/css" rel="stylesheet" href="common/layui/css/layui.css" r

随机推荐