踩坑 | vue项目运行后使用require()图片也不显示

问题描述

在网上查阅之后，发现结论是在使用vue动态加载图片时，必须使用require。但是采用了这种写法发现都不显示。

不显示图片的写法

<img :src="imgSrc"></img>
<img :src="require(imgSrc)"></img>

//js
const imgSrc = '@common/resources/images/coronaryArtery.png'

问题：通过控制台查看并没有解析该地址的图片，

解决办法1：src属性直接传入地址

在img标签的src属性中直接传入地址
该方法适合于单图片的页面

<img src="@common/resources/images/coronaryArtery.png" />
<img :src="require('@common/resources/images/coronaryArtery.png')" />

常见场景：不满足
场景1：img标签都在被封装好的组件内部，我们利用组件的属性将地址值传递。
场景2：图片很多，需要循环利用其地址，

解决办法2

之前的写法image_src的类型是字符串，现在的写法image_src是require引用之后的返回值。
之前就算img标签动态使用image_src，值也是从默认的字符串变为image_src本身(也是一个字符串)

//html
<img :src="image_src " />
//js
const image_src = require('@viewer/assets/toolbar-icons/coronaryArtery.png');