Vite + Vue 中 img 动态设置 src

直接在模板中使用:

html 复制代码
<img src="@/assets/images/home/home_icon.png" />

如果设置动态 src:

html 复制代码
<img :src="`@/assets/images/home/${name}.png`" />

这样加载的路径就是:http://10.227.198.175:5173/pages/home/@/assets/images/home/home-icon.png 所以 @/assets 不能正确解析,src 当成字符串,按相对路径处理了。

导入图片,在模板中引用:

js 复制代码
<script setup lang="ts">
const name = ref('home_icon') // Just an example

const img = computed(() => require(`@/assets/images/home/${name.value}.png`))
</script>

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

报错:Uncaught ReferenceError: require is not defined

因为 Vite 是基于 ES Modules (ESM) 构建的,而 require 是 CommonJS 模块系统的一部分。

使用 new URL(url, import.meta.url)

看官网,使用这种方式处理静态资源:

js 复制代码
function handleSrc(name: string): string {
  const img = new URL(
    `../../../assets/images/home/${name}.png`,
    import.meta.url,
  ).href

  return img
}

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

i​mport.meta.urlURL 构造器 都属于原生的功能。

import.meta 打印出来:

url 就是当前的模块地址。

new URL 构造一个 url 对象,语法:

js 复制代码
new URL(url)
new URL(url, base)

如果 url 是一个相对路径,则必须提供 base,如果 url 是一个绝对路径,则 base 会被忽略。

而构造的对象为:

实际上以上构造的 url 必须是相对地址,官网也有说,一开始我使用 @/assets 的方式,也是不能正确解析:

js 复制代码
function handleSrc(name: string): string {
  const img = new URL(
    `@/assets/images/home/${name}.png`,
    import.meta.url,
  ).href

  return img
}

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

直接在 src 中使用相对地址

以上通过构造 url 的方式可行,实际上在 src 中直接使用相对路径就可以了:

html 复制代码
<img :src="`../../../assets/images/home/${name}.png`" />

总结:如何使用别名@

因此,以上 如果设置动态 src 的问题在于,别名 @ 的处理问题。

在 Vue 模板中,静态路径可以使用别名,例如 @。所以,<img src="@/assets/images/home/home_icon.png" /> 是有效的,因为 @/assets/images/home/home_icon.png 是一个静态的字符串,webpack 在编译时可以正确地解析它。这是因为在编译阶段,这些路径已经被明确定义,Vite 能够静态地找到并处理这些资源。

然而,当试图在动态字符串中(例如模板字符串或绑定的表达式)使用别名时。像这样的代码 <img :src="`@/assets/images/home/${name}.png`" /> 这个路径是在运行时被计算的,webpack 在编译阶段无法知道这个路径的最终值会是什么。因此,webpack 无法解析或处理这个路径引用的资源。

还可以使用 import()

js 复制代码
<template>
  <img :src="imgUrl" alt="Dynamic Image">
</template>

<script setup>
import { ref } from 'vue';

let name = 'your-image-name'; // 你的图片名
let imgUrl = ref('');

import(`@/assets/images/${name}.png`)
  .then(module => {
    imgUrl.value = module.default;
  });
</script>

import() 也是一个原生的功能。它是一个返回 Promise 的函数,可以在运行时动态加载模块。

但是这种方法依然无法处理别名。

相关推荐
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
天若有情6739 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
草巾冒小子9 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
eggcode10 小时前
Vue+Openlayers加载OSM、加载天地图
vue.js·openlayers·webgis
武昌库里写JAVA13 小时前
vue3面试题(个人笔记)
java·vue.js·spring boot·学习·课程设计
lalalalalalalala14 小时前
开箱即用的 Vue3 无限平滑滚动组件
前端·vue.js
前端Hardy14 小时前
8个你必须掌握的「Vue」实用技巧
前端·javascript·vue.js
久爱@勿忘15 小时前
第二章:创建登录页面
前端·vue.js·elementplus
Jinxiansen021115 小时前
Vue 3 中父子组件双向绑定的 4 种方式
javascript·vue.js·ecmascript
木依15 小时前
Vue3 Element plus table有fixed列时错行
javascript·vue.js·elementui