Vite 踩坑：无法使用 require() 获取图片

发现问题

当我在 img 标签的 src 属性上使用 require() 时，浏览器出现了 require is not defined 的错误。

<img :src="require('../assets/images/img.png')" />

解决问题

通过查阅 Vite 的文档，给出的解决方案是使用 new URL (opens new window)。

<script setup>
const getImgUrl = name => new URL(`../assets/images/${name}`, import.meta.url).href
</script>

<template>
  <img :src="getImgUrl('img.png')" />
</template>