el-input type=image 图片不显示的问题

Question

问题遇到的现象和发生背景

背景如下:原型设计要求做一个自定义的图片关闭按钮.
我知道可以用img直接做但是想起来有这么个用法就试试,结果直接翻车!

//图片不显示
<el-input type="image" class="imgErr" src="../../static/images/tz_big_screen/错误.png"></el-input> 
<el-input type="image" class="imgErr" src="/static/images/tz_big_screen/错误.png"></el-input> 
//图片显示
 <img class="imgErr" src="../../static/images/tz_big_screen/错误.png" @click="listShowsErr">

附上我目录

和原型设计

运行结果及报错内容

没有后台报错单纯不显示,我就想问问各位老哥我写的地方哪里有问题

我的解答思路和尝试过的方法

最开始以为是要根目录,然后翻车

Answer 1

你的引入路径不对,是框架打包后读取不到图片路径了

<el-input type="image" class="imgErr" :src="require('/static/images/tz_big_screen/错误.png')"></el-input>

这样引用就没有问题了