问题:在 Vue3 项目中,使用 require 引入图片,报错 require is not defined
原因: Vue3 使用的是 vite,而 require 是 Webpack 的方法。
官网说明:
 
解决代码:
<template>
	<div v-for="(item, index) in list" class="list-item">
		<img :src="getAssetURL(item)" alt=""> 
	</div>
</template>
<script setup>
  import { ref } from 'vue'
  const list = ref([
    {
      sex: '男',
      name: '张小白',
      type: '成人'
    },
    {
      sex: '女',
      name: '张小白',
      type: '成人'
    }
  ])
  const getAssetURL = (image) => {
    // 参数一: 相对路径   参数二: 当前路径的URL
    return new URL(`/src/assets/头像${image.type}${image.sex}.png`, import.meta.url).href
  }
</script>



















