Nuxt v-bind绑定img src不显示的解决
2019-12-06 12:09
916 查看
问题:
使用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>
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- asp.net后台绑定与前台显示,如:eval,bind,container.dataitem 的使用
- Android ListView数据绑定显示的三种解决方法
- 超实用,解决img标签src绑定了正确地址后,图片有时候不显示问题
- “BindingSource绑定单个实体对象后在代码中赋值无效和无法显示”的解决方法
- GridView绑定数据源,无记录时表头也显示的一种解决方法
- GridView绑定数据源,无记录时表头也显示的一种解决方法
- Jquery的bind绑定方法 自动执行的问题解决
- WinForm DataGridView 绑定泛型List(List<T>)/ArrayList不显示的原因和解决
- 一例knockout with绑定,异步调用数据为null导致的绑定div标签内容不能显示的解决
- 如何解决FormView中实现DropDownList连动选择时出现 "Eval()、XPath() 和 Bind() 这类数据绑定方法只能在数据绑定控件的上下文中使用" 的错误
- 如何解决FormView中实现DropDownList连动选择时出现 "Eval()、XPath() 和 Bind() 这类数据绑定方法只能在数据绑定控件的上下文中使用" 的错误
- Win7绑定网关IP和MAC地址时显示“ARP项添加失败:拒绝访问”的解决办法
- jQuery中的bind绑定事件与文本框改变事件的临时解决方法
- GridView绑定数据源,无记录时表头也显示的一种解决方法
- angular——ng-bind,ng-cloak,ng-src,ng-href解决AngularJS 代码未加载完而出现显示 AngularJS 代码,进而会有闪烁的效果
- datagrid绑定list没有数据 表头不显示的解决方法
- jQuery中的bind绑定事件与文本框值改变事件解决方法
- ng-bind指令解决页面显示{{TeacherName}}问题
- 解决Eval()、XPath() 和 Bind() 这类数据绑定方法只能在数据绑定控件的上下文中使用
- DevExpress Report web 绑定数据后没有显示的解决方法