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

之前有些过一篇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>