vite+ts+vue3.2|vite+ts+vue3.2 项目内使用导入本地图片require报错

2022-05-01

问题描述：

列表渲染中包含图片，图片资源放在项目本地静态文件夹内，默认列表数据定义在一个单独ts文件内，导入进当前页面模板内使用报错

框架：

vite+ts+vue3.2

尝试方案： 1.直接使用外部引入路径 ×

这里使用别名还是相对路径都无法解析正确图片地址

文章图片

文章图片

2.使用require() ×
在vue2项目中JS文件内使用require()可以解析图片路径，这里TS不支持require(), 参考网上有答案说npm i @type/node --save -dev，安装完这个包后使用仍报错，欢迎指正

文章图片

3.使用import() √
使用import()需要考虑异步问题，新造一个变量接收或者原始数据中多加一个键

文章图片

4.使用new URL() √
【vite+ts+vue3.2|vite+ts+vue3.2 项目内使用导入本地图片require报错】这个方法用起来就简单很多，vite官网上有详细描述

文章图片

5..vue文件内直接引用图片 √

相关链接

import.meta.url: https://vitejs.cn/guide/asset...;

推荐阅读

上一篇：QCustomPlot开发笔记（一）（QCustomPlot简介、下载以及基础绘图）

下一篇：MariaDB导出