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

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