Vite中不能使用require，该怎么动态获取静态图片资源？

Posted 2022-08-21 举止优雅的猪

之前有些过一篇vite中不能使用require的问题：​​关于Vite不能使用require问题​​

也写过一篇Vue3中引入图片：​​Vue3加载本地assets图片​​ 

大家有兴趣可以去看下，主要就是介绍了安装第三方插件可以在项目中使用require和vue3引入图片。

这篇主要是跟大家分享下还有其他的方式

import 

首先当然是可以使用import引入的 

<template>
  <div>欢迎页</div>
  <img :src="myImg" alt="">
</template>
<script setup lang="ts">
import assetsImg from @/assets/logo.png

const myImg: string = assetsImg
</script>

这种方式自然是没问题 

new URL(url, import.meta.url)

另外一种就是vite给我们提供的 new URL(url, import.meta.url)

中文网：​​https://vitejs.cn/guide/assets.html#the-public-directory​​ 

我们可以在@/utils/index.ts中向外暴露一个方法，拱外界使用 

@/utils/index.ts 

/**
 * 获取静态图片资源
 * @param name 
 * @returns 
 */
export const getImageUrl = (name: string): string => new URL(`../$ name `, import.meta.url).href

然后组件中使用： 

<template>
  <img :src="myImg" alt="">
</template>
<script setup lang="ts">
import  getImageUrl  from @/utils

const str = assets/logo.png

const myImg: string = getImageUrl(str)
</script>