vue中动态引入本地静态资源(URL)一、webpack require webpack或者vue-cli构建的vue程

一、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/xxx.xxx', import.meta.url)
console.log('url', url.href)

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

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

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

即打包构建时,图片并不会如期进行打包,从而在加载时无法显示,出现 404 问题(它不会参与构建期替换，改为运行时在浏览器里解析,可能出现开发环境可以用，打包后不可用的问题，与Vite 版本、插件、以及是否有中间件拦截该路径有关)

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

(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/${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');
}

动态批量引入图片资源：

// 这种方式不稳定，不推荐使用
// const useImage = (imgUrl: string): string => {
//   return new URL(`../assets/${imgUrl}`, import.meta.url).href 
// }

// 推荐使用此种方式
// 注意：进行批量引入时，需要加上图片的后缀，因为如果文件夹中存在css或者scss等文件时，as: 'url'方式会这个匹配把 assets 下所有文件都按“URL”方式导入，对样式文件，Vite 的 '?url' 并不适用，会尝试请求 .../variables.module.scss?url ，从而导致 dev server 返回 500，所以需要限制匹配范围为“仅图片扩展名”，避免样式文件被错误导入为 URL
const images = import.meta.glob('../assets/**/*.{png,jpg,jpeg,webp,gif,svg,ico,bmp}', { eager: true, as: 'url' })
const useImage = (imgUrl: string): string => {
  const url = images[`../assets/${imgUrl}`] as string
  return url || ''
}
export default useImage

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

一、webpack

require