vue中img的src动态渲染不显示

Julia_0502

于 2021-06-07 11:26:55 发布

阅读量1.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue html 文章标签： vue.js html js javascript css3

本文链接：https://blog.youkuaiyun.com/Julia_0502/article/details/117654095

vue 同时被 2 个专栏收录

18 篇文章

订阅专栏

html

6 篇文章

订阅专栏

没有检索到摘要

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中img的src动态渲染不显示

问题描述

根据不同状态显示不同的状态图标，原代码（不显示）如下：

		<img
          :src="`@/assets/device/${itemdata.deviceStateName}.png`"
          :alt="itemdata.modelName"
        >

实际上在引用的路径下这些图片是存在的，只是引用的方式不对，图片并没有被打包，显示引入路径，所以导致找不到该图片

在这里插入图片描述

解决办法

使用require引入图片

			<img
              :src="
                require(`@/assets/images/home/${itemdata.deviceStateName}.png`)
              "
              :alt="itemdata.deviceStateName"
              width="19"
            >

在这里插入图片描述