当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>


相关文章
|
5月前
|
编解码 前端开发 iOS开发
响应式图片的实现(含picture标签、srcset属性、sizes属性的使用方法,设备像素比详解)
响应式图片的实现(含picture标签、srcset属性、sizes属性的使用方法,设备像素比详解)
82 0
|
6月前
|
JavaScript 前端开发
详尽分享解决img的src属性为空时会有边框的情况
详尽分享解决img的src属性为空时会有边框的情况
259 0
|
7月前
html中img图片进行等比例缩放的实例代码
HTML中,要修改img元素定义的图片的大小,且是等比例缩放,不改变宽和高的比值,那么可以采用只设置img元素属性中width和height中的任何一个,不要同时设置两个即可实现img图片的等比例缩放效果。下面将通过两个实例来分别实现这两种方法。
173 1
解决el-image中预览图片功能顺序问题
解决el-image中预览图片功能顺序问题
531 0
05 - 超链接 a 标签+ 图片标签img
05 - 超链接 a 标签+ 图片标签img
164 0
|
编解码 前端开发 JavaScript
img标签中的srcset属性有什么用?
img元素的srcset属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。 也就是说,我们不需要使用JavaScript也可以实现分辨率自适应。
393 0
|
前端开发
react 判断标签img 图片是否存在,不存在则替换为默认图片
react 判断标签img 图片是否存在,不存在则替换为默认图片
835 0
|
前端开发
前端表格内嵌套el-image无法加载图片解决办法
前端表格内嵌套el-image无法加载图片解决办法
700 0