【第12期】Vue3+TypeScript+Vite中动态引入图片等静态资源

概述

在Vue2中，我们大多数项目使用webpack来打包，图片等静态资源通过require来引入，但是随着Vue3+TypeScript+Vite的普及,作为webpack的打包工具已经被vite代替,通过require引入静态资源的方法也做了相应的修改。vue3 如果使用的是typescript开发，就会出现require引入图片报错，require is not defined 不能像使用vue2 这样imgUrl: require(’…/assets/test.png’) 导入，是因为typescript不支持require导入，所以用import导入。

引入方式

在Vue3+TypeScript+Vite项目开发需要 动态引入静态资源，也就是img标签的src属性值为动态获取，按照以往的做法直接是require引入即可，如下代码：

<img class="img" :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关于这一部分的官方说明在这里，有兴趣的小伙伴可以看官方的文档:https://vitejs.cn/guide/assets.html#new-url-url-import-meta-url

使用import.meta.url

这里主要使用new URL 一共接收两个参数，第一个参数即图片的路径，这里就是对应require中的值，第二个参数是vite的一个全局变量，可以理解成直接写死了 import.meta.url

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

template中使用

<img class="t-desktop-icon" :src="getImg(path)" />

使用await import引入

<template>
    <img :src="imgUrl" alt="logo">
</template>
<script lang="ts">
    import {ref, onMounted} from "vue";
    export default {
        name: "imgPage",
        setup(){
            onMounted(()=>{
                handleImgSrc();
            })
            const imgUrl = ref('');
            const handleImgSrc = async()=>{
                let img = 
                imgUrl.value = await import('@/assets/img/logo.png').default;
            };
            return{
                imgUrl
            }
        }
    }
</script>