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>
相关推荐
咔咔一顿操作几秒前
【CSS 3D 实战】从零实现旋转立方体:理解 3D 空间的核心原理
前端·css·3d·css3
DONG9132 分钟前
深度解析CSS单位与媒体查询:构建现代化响应式布局的核心技术
前端·css·html·css3·媒体
一只小风华~8 分钟前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架
Zz_waiting.1 小时前
Javaweb - 14.6 - Vue3 数据交互 Axios
开发语言·前端·javascript·vue·axios
切糕师学AI1 小时前
前后端分离架构中,Node.js的底层实现原理与线程池饥饿问题解析
前端·vue.js·node.js
妄小闲1 小时前
网页设计模板 HTML源码网站模板下载
前端·html
icebreaker2 小时前
tailwindcss 究竟比 unocss 快多少?
前端·css·github
卢叁2 小时前
Flutter之自定义TabIndicator
前端·flutter
每天吃饭的羊2 小时前
state和ref
前端·javascript·react.js
GEO_YScsn2 小时前
Vite:Next-Gen Frontend Tooling 的高效之道——从原理到实践的性能革命
前端·javascript·css·tensorflow