关于vue3中动态使用img标签（本地资源）记录

Simaoya

于 2024-07-04 15:34:31 发布

阅读量416

点赞数 5

分类专栏： vue 文章标签： chrome javascript 前端 vue.js

本文链接：https://blog.csdn.net/Anlittlecat/article/details/140180786

版权

vue 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

关于img标签中对本地图片动态赋值被识别为网络资源，找不到图片相关内容的记录与解决。

错误写法：

<div class="main-box" v-for="(item,index) in ltMsg" :key="index">
            <img :src="'@/assets/multi-source/lt-'+(index+1)+'.png'">
</div>

将该地址识别为网络资源，无法正常显示

正确写法1：

适用于图片命名有规律的情况

<div class="main-box" v-for="(item,index) in ltMsg" :key="index">
            <img :src="require('@/assets/multi-source/lt-'+(index+1)+'.png')">
</div>

正确写法2：

适用于图片命名无规律的情况

<div class="main-box" v-for="(item,index) in ltMsg" :key="index">
            <img :src="item.img">
</div>
...
import img1 from "@/assets/lt-1.png";
import img2 from "@/assets/lt-2.png";
import img3 from "@/assets/lt-3.png";
import img4 from "@/assets/lt-4.png";
...
const ltMsg = ref（
[
        {img: img1, title: 'xx个数', num: '3'},
        {img: img2, title: 'xx个数', num: '7'},
        {img: img3, title: 'xx个数', num: '9'},
        {img: img4, title: 'xx个数', num: '34'}
      ]
）