首页 > 其他 > 详细

vue v-fro图片循环注意事项

时间:2021-08-04 19:29:38      阅读:21      评论:0      收藏:0      [点我收藏+]

vue大家应该都不陌生,但里面也有很多需要注意的地方,比如图片循环

注意事项1:
代码:
技术分享图片

效果图:
技术分享图片

注意:代码里文字循环是使用 {{ }} 包括住内容,如: <p>名称:{{m.Text}}</p> 而图片路径则是这样写的:<img :src="m.src" >,如果你写成这样: <img :src={{m.src}} >,那就大错特错了

注意事项2:

有时候图片循环时会出现一个问题,图片循环不出来。
解决的办法也很简单,那就是在图片路径前加上 require了。
示例: { id: 1, src: require("./1.jpg"), Text: "汽车1" },
require写上后图片基本上都能出现了。

而出现这样问题的原因是获取图片路径时,这个路径被解析成了一个字符串,所以图片显示不出来,而require是commonjs中的关键字,可以用来解析路径。
当然,如果图片能够显示,那么再加上 require反倒是会出问题,所以要注意这一点。

vue v-fro图片循环注意事项

原文:https://www.cnblogs.com/s272/p/15099887.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!