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


相关文章
|
小程序 数据安全/隐私保护 开发者
【已解决】开发者扫码登录提示“需要验证小程序密码”
开发者扫码登录提示“需要验证小程序密码”
1086 0
【已解决】开发者扫码登录提示“需要验证小程序密码”
|
9月前
|
人工智能 自然语言处理 Serverless
AI 大模型+智能客服:自动识别客户意图,实现高效沟通
本方案旨在介绍如何部署 AI 大模型实现对客户对话的自动化分析,支持多人、多语言识别,精准识别客户意图、评估服务互动质量,实现数据驱动决策。
1008 14
|
11月前
|
人工智能 弹性计算 运维
操作系统控制台,让运维更简单!
操作系统控制台初体验,运维智能666!
458 37
操作系统控制台,让运维更简单!
|
存储 编译器 C语言
C语言:文件缓冲区刷新方式有几种
C语言中文件缓冲区的刷新方式主要包括三种:自动刷新(如遇到换行符或缓冲区满)、显式调用 fflush() 函数强制刷新、以及关闭文件时自动刷新。这些方法确保数据及时写入文件。
简易投影仪的制作(上)
简易投影仪的制作(上)
341 0
|
消息中间件 弹性计算 运维
阿里云ECS事件通知产品详解
介绍阿里云ECS事件通知产品的详情和使用案例,包括控制台、OpenAPI、调试等。
uniapp实战 —— 竖排多级分类展示
uniapp实战 —— 竖排多级分类展示
341 0
|
网络协议 网络性能优化 数据安全/隐私保护
OSI(开放系统互连参考模型)知识点详细介绍!!
OSI(开放系统互连参考模型)知识点详细介绍!!
1177 0
|
安全 Java 编译器
使用 gRPC 构建高效可靠的微服务
在现代分布式系统中,构建高效可靠的微服务是一项关键任务。gRPC(Google Remote Procedure Call)提供了一种强大而灵活的方式来实现跨语言和跨平台的通信。本文将介绍 gRPC 的基本概念、架构以及其在构建微服务时的优势。
878 0
|
Java C# Android开发
Xamarin.Android | 界面跳转到手机自带的自启动管理界面,引导用户将APP加入自启动
为了帮助用户在使用 APP 时提高其稳定性和使用体验,有时候我们需要让安卓手机的界面跳转到手机自带的自启动管理界面,以此来引导用户将 APP 加入自启动,确保应用程序在后台运行时不被系统杀死,从而保证应用程序服务的稳定性和可靠性。同时,这也可以提高用户的使用体验,使用户能够更好地享受应用程序的功能和服务。
1089 0
Xamarin.Android | 界面跳转到手机自带的自启动管理界面,引导用户将APP加入自启动