vue中动态引入本地静态资源(URL)

一、webpack

require

webpack或者vue-cli构建的vue程序,可以使用require解决:

// 假设图片在/assets/images下
<img :src="require(`@/assets/images/${xxx}.png`)">

但require仅支持在webpack环境中使用,vite中无法支持

二、vite

vite 官方默认的配置，如果资源文件在assets文件夹打包后会把图片名加上hash值，但是直接通过 :src="imgSrc"方式引入并不会在打包的时候解析，导致开发环境可以正常引入，打包后却不能显示的问题.可以将资源放在public目录下,打包时会被完整的复制到目标目录的根目录下:

目录默认是/public,但是可以通过publickDir选项来配置

请注意:
    1.引入public中的资源应该永远使用跟绝对路径,例如'public/icon.png'应在源码中引用为'/icon.png'
    2.public中的资源不应被js文件引用

第一种方式(适用于处理单个链接的资源文件）

import homeIcon from '@/assets/mdcImgs/home/home_icon.png' 

<img :src="homeIcon" />

第二种方式（适用于处理多个链接的资源文件）

推荐，这种方式传入的变量可以动态传入文件路径！！

静态资源处理 | Vite 官方中文文档

(1) new URL(url, import.meta.url)

以./src为例

const url = new URL('./src', import.meta.url)
console.log('url', url)

这里面的href值即为当前图片地址
但官网也明确指明:

在生产构建时，Vite 才会进行必要的转换保证 URL 在打包和资源哈希后仍指向正确的地址。然而，这个 URL 字符串必须是静态的，这样才好分析。否则代码将被原样保留、因而在 build.target 不支持 import.meta.url 时会导致运行时错误。

// Vite 不会转换这个
const imgUrl = new URL(imagePath, import.meta.url).href

即打包构建时,图片并不会如期进行打包,从而在加载时无法显示,出现 404 问题

也就是说,构建时还必须要保证是静态字符串

(2) import.meta.glob

以./src/assets/images/*为例

const modules = import.meta.glob('../../assets/images/*.png')
console.log('modules', modules)

可以看出所有模块都是异步模块,如果有同步加载的需求,可以显式指定第二个参数:

const modules = import.meta.glob('../../assets/images/*.png',{ eager: true })

于此,可以通过封装来处理所有图片加载问题:

const getImageUrl = (name: string) => {
    const modules = import.meta.glob('../../assets/images/*.png', { eager: true })
    const src = `../../assets/images/${name}.png`
    return (modules[src] as { default: string }).default
}

需要注意的是, src =../../assets/images/ $n\; a\; m\; e\; .\; p\; n\; g\; \text{'}\; 中是不支持路劲别名即\; \text{'}\; s\; r\; c\; =\; \text{'}\; @\; /\; a\; s\; s\; e\; t\; s\; /\; i\; m\; a\; g\; e\; s\; /\; \{name\}.png`中是不支持路劲别名即`src\; =\; `@/assets/images/$name.png'中是不支持路劲别名即'src= '@/assets/images/{name}.png的,必须为绝对路径或者相对路径 import.meta.glob`也支持多个匹配模式化:

const modules = import.meta.glob(['./dir/*.js', './another/*.js'])

补充：如果是背景图片引入的方式（一定要使用相对路径，不然，开发环境正常，生产环境路径错误）

.imgText {
  background-image: url('../../assets/images/1462466500644.jpg');
}