亲宝软件园·资讯

展开

Vue3 TypeScript Vite引入静态资源

Oliver尹 人气:0

问题:Vue3+TypeScript+Vite的项目中如何使用require动态引入类似于图片等静态资源!

描述:今天在开发项目时(项目框架为Vue3+TypeScript+Vite)需要 动态引入静态资源,也就是img标签的src属性值为动态获取,按照以往的做法直接是require引入即可,如下代码:

<img class="demo" :src="require(`../../../assets/image/${item.img}`)" />

写上后代码波浪线报错,报错提示:

找不到名称 “require”。是否需要为节点安装类型定义? 请尝试使用 npm i --save-dev @types/node。ts(2580)

在进行了npm i --save-dev @types/node 安装以及在TypeScript的配置文件 tsconfig.json中添加了配置项 "type":["node"] 后波浪线提示消失,但 浏览器的控制台依然报错,错误提示如下:

解决

先说结论吧,在vite中不能使用require引入图片资源因为这里的require貌似是webpack提供的一种加载能力,由于我们并非使用的webpack作为项目的构建工具,我们使用的是Vite,因此这里必须转用 Vite提供的静态资源载入,vite关于这一部分的官方说明在这里,有兴趣的小伙伴可以看官方的文档:Vite中静态资源处理

这里我们在提炼的说明一下,官网上示例的用法如下:

const imgUrl = new URL('./img.png', import.meta.url).href
document.getElementById('hero-img').src = imgUrl

可能不大好理解,简单的说 new URL 一共接收两个参数,第一个参数即图片的路径,这里就是对应require中的值,第二个参数是vite的一个全局变量,可以理解成直接写死了 import.meta.url,放到项目中大致如下:

<img class="t-desktop-icon" :src="getIcon(name)" />

template 的img上动态引入,getIcon方法如下

function getIcon(name: string) {
    return new URL(`../../../../assets/images/svg/${name}`, import.meta.url).href;
}

这样就可以在Vue3+TypeScript+Vite中动态引入图片等静态资源了

加载全部内容

相关教程
猜你喜欢
用户评论