Vue3绑定img的src使用require时报require is not defined错误

Vue 2 项目默认基于 webpack 构建，webpack 会在编译阶段自动注入 CommonJS 规范的require方法，完成本地静态资源的路径解析、加载处理，因此模板内直接写require()引入图片可以正常运行。
Vue 3 生态默认推荐使用 Vite 作为构建工具，Vite 基于原生 ES Module 规范实现，构建和运行阶段都不会注入 CommonJS 专属的require方法，运行环境本身也不原生支持该语法，因此直接沿用 Vue 2 的require写法会抛出require is not defined的报错。

根据项目场景选择对应写法即可：

• 固定静态路径引入：使用 ES Module 原生import语法提前导入图片资源，再绑定到src属性

<template>
  <img :src="img1" />
</template>

<script setup>
import img1 from './img/1.png'
</script>

• 动态路径引入：使用构建工具原生支持的new URL()配合import.meta.url解析资源，支持路径动态拼接

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

<script setup>
const getImgPath = (imgName) => {
  return new URL(`./img/${imgName}`, import.meta.url).href
}
</script>

• public 目录绝对路径引入：将图片资源放到项目根目录的public文件夹下，直接通过根路径绑定，该方式引入的资源不会经过构建工具的哈希重命名、压缩处理

<template>
  <!-- 对应路径为 public/img/1.png -->
  <img src="/img/1.png" />
</template>

注意：如果你的 Vue 3 项目是基于 webpack 搭建的，出现该报错需要检查构建配置中是否关闭了 CommonJS 语法转换支持，调整对应配置后即可兼容require写法，但更推荐使用上述符合 ES Module 规范的写法。

内容的提问来源于stack exchange，提问作者MAX GOLD