Vue3 动态引入图片: require is not defined报错

问题:在 Vue3 项目中,使用 require 引入图片,报错 require is not defined

原因: Vue3 使用的是 vite,而 require 是 Webpack 的方法。

官网说明

解决代码:

javascript 复制代码
<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>
相关推荐
uhakadotcom几秒前
兄弟们,炸裂了!llama 4发布了!又有哪些创业公司被颠覆了?
前端·算法·面试
uhakadotcom3 分钟前
EventEmitter3:高性能事件发射器的使用与优势
前端·javascript·面试
XH27615 分钟前
Android Bitmap.createBitmap() 用法全解析
前端·设计
XH27615 分钟前
Android ContentResolver地点增删改查详解
前端·后端
uhakadotcom16 分钟前
🎭 Playwright:跨浏览器自动化测试框架
前端·javascript·面试
打野赵怀真17 分钟前
react父子组件如何通信?
前端·javascript
Jalor19 分钟前
Flutter 与 HarmonyOS NEXT | IAPKit(应用内支付服务)避坑指南
前端·flutter·harmonyos
市民中心的蟋蟀20 分钟前
第六章 :介绍全局状态管理库
前端·javascript·react.js
uhakadotcom22 分钟前
Figma入门指南:协作设计的新时代
前端·javascript·面试
欲儿24 分钟前
在线记事本——支持Markdown
前端·javascript·程序人生·sqlite·php·轻量级在线记事本