img的src通过js或ts引入方法以及Vue3+Ts+Webpack编写项目所遇问题

699 阅读1分钟

在使用Vue3+Ts+Webpack(vue.config.js)做一个项目时候,遇到了这种情况,使用img的src时候遇到的问题,在使用平台src直接导入图片时候效果是正常的,如下: 这个是template模板部分: image.png

效果: 图片正常,但是不利于图片多的时候:

image.png

当我图片比较多,想利用数组配置src的路径时候,会遇到这个问题: 这个是template模板部分:

image.png

ts部分:

image.png

效果: 图片无法正常引入:

image.png

去了解了原因,原来是需要用import引入图片,具体原因暂时未了解,有空更新:

以下是用import引入图片情况: 这个是template模板部分:

image.png

ts部分:

image.png

效果正常:

image.png

但是注意ts部分是爆红的,这个应该是ts的错误:

image.png

网上找了一下方法顺利解决:

案例:

问题:找不到模块“@/assets/images/xxx.png”或其相应的类型声明

image.png

原因:ts无法识别png类型

解决办法:在自带的ts文件中进行声明:

image.png

我的解决:

image.png

果然问题顺利解决,没有爆红:

image.png