当v-for遇到img标签-加载本地静态图片

简介: 当v-for遇到img标签-加载本地静态图片

   

约定:本地图片放在assets目录下

具体如下:

----assets
-----------img/*.png
----layouts
-----------test.vue

情况1. data中定义了图片的地址

注意点:

使用v-bind绑定

必须使用require引入图片路径

<ul>
    <li v-for="(item,index) in data.imgList" :key="index">
        <img :src="item.src" />
    </li>
</ul>
data(){
          return {
            imgList:[
              { src: require('../assets/img/1.png') },
            ]
          }
      }

情况2. 在img标签的src属性中动态拼接图片地址

注意点:

必须使用require引入图片路径

这个是动态拼接地址,可以实现随机图片

<ul>
    <li v-for="(item,index) in 10 " :key="index">
        <img :src="require('../assets/img/' + (index+1) + '.png')" />
    </li>
</ul>


相关文章
|
23天前
|
存储 数据可视化
PS gif修改背景颜色(附加图片)
PS gif修改背景颜色(附加图片)
36 0
|
5月前
html中img图片进行等比例缩放的实例代码
HTML中,要修改img元素定义的图片的大小,且是等比例缩放,不改变宽和高的比值,那么可以采用只设置img元素属性中width和height中的任何一个,不要同时设置两个即可实现img图片的等比例缩放效果。下面将通过两个实例来分别实现这两种方法。
88 1
|
9月前
|
JavaScript 前端开发
Base64图片页面显示
Data URI scheme 是一种将小容量数据直接嵌入到文档中的技术。将 Base64 编码的图片数据直接嵌入到 img 标签的 src 属性中,如下所示:
101 0
|
9月前
|
JSON JavaScript 数据格式
解决vue图片标签动态绑定本地图片路径不显示问题
解决vue图片标签动态绑定本地图片路径不显示问题
156 0
|
前端开发
react 判断标签img 图片是否存在,不存在则替换为默认图片
react 判断标签img 图片是否存在,不存在则替换为默认图片
622 0
|
编解码 前端开发 JavaScript
img标签中的srcset属性有什么用?
img元素的srcset属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。 也就是说,我们不需要使用JavaScript也可以实现分辨率自适应。
343 0
html+css实战14-图片属性
html+css实战14-图片属性
63 0
html+css实战14-图片属性
|
前端开发
前端表格内嵌套el-image无法加载图片解决办法
前端表格内嵌套el-image无法加载图片解决办法
595 0
没有图片增加默认图片,有图片路径,但是没有图片文件解决方案
没有图片增加默认图片,有图片路径,但是没有图片文件解决方案
126 0