vue3 img图片怎么渲染

在 Vue3 中加载图片(img)src地址时,出现无法加载问题。网上很多都建议使用 require 加载相对路径,如下:

html 复制代码
 <img :src="require('../assets/img/icon.jpg')"/>

但是按照这种方式加载又会报错如下:

clike 复制代码
require is not defined


原因:

Vue3 的 vite 打包中没有 require,Vue低版本是支持require的。

这是因为Vue3早期的低版本采用的还是webpack打包工具。webpack里面是有require的,也是支持require的。

解决方案:

使用import解决,但是又不能直接用,需要使用到new URL,如下:

javascript 复制代码
function targetUrl(name) {
  return new URL(`../${name}.png`, import.meta.url).href
}
html 复制代码
<template>
  <div>
    <img v-for="route in routes" :src="targetUrl(route.icon)" :alt="route.name" />
  </div>
</template>

<script setup>
  const routes = ref([
	  { name: 'page1', icon: 'icon1' },
	  { name: 'page2', icon: 'icon2' },
  ]);
  
  function targetUrl(name) {
    return new URL(`../assets/img/${name}.png`, import.meta.url).href;
  }
};
</script>
相关推荐
小李小李不讲道理13 分钟前
「Ant Design 组件库探索」四:Input组件
前端·javascript·react.js
连合机器人32 分钟前
晨曦中的守望者:当科技为景区赋予温度
java·前端·科技
郑板桥301 小时前
tua-body-scroll-lock踩坑记录
前端·javascript
慢半拍iii2 小时前
JAVA Web —— A / 网页开发基础
前端
gnip2 小时前
pnpm 的 monorepo架构多包管理
前端·javascript
新手村领路人4 小时前
Firefox自定义备忘
前端·firefox
乖女子@@@4 小时前
css3新增-网格Grid布局
前端·css·css3
伐尘4 小时前
【CE】图形化CE游戏教程通关手册
前端·chrome·游戏·逆向
不想吃饭e5 小时前
在uniapp/vue项目中全局挂载component
前端·vue.js·uni-app
非凡ghost5 小时前
AOMEI Partition Assistant磁盘分区工具:磁盘管理的得力助手
linux·运维·前端·数据库·学习·生活·软件需求