vue3动态引入图片不显示问题

方法1.(打包后动态引用的图片未被打包入工程中,webpack,vite)

1.图片放到public 目录会更省事,不管是开发环境还是生产环境,可以始终以根目录保持图片路径的一致.

假设:

静态文件目录:src/assets/images/

我们的目标静态文件在 src/assets/images/home/icon.png

复制代码
<img :src="require('@/assets/images/home/icon.png')" />

试require动态引入, 发现报错:require is not defind,这是因为 require 是属于 Webpack 的方法方法1(适用于处理单个链接的资源文件)

复制代码
import homeIcon from '@/assets/images/home/icon.png'

<img :src="homeIcon" />

方法2(适用于处理多个链接的资源文件)
推荐,这种方式传入的变量可以动态传入文件路径!!

复制代码
静态资源处理 | Vite 官方中文文档
new URL() + import.meta.url

这里我们假设:
工具文件目录: src/util/pub-use.ts
pub-use.ts

// 获取assets静态资源
export default  const getAssetsFile = (url: string) => {
   return new URL(`../assets/images/${url}`, import.meta.url).href
}

使用

复制代码
import usePub from '@/util/public-use'
setup () {
  const Pub = usePub()
  const getAssetsFile = Pub.getAssetsFile
  return { getAssetsFile }
}

可以包含文件路径

复制代码
<img :src="getAssetsFile('/home/icon.png')" />

方法3(适用于处理多个链接的资源文件)
不推荐 ,这种方式引入的文件必须指定到具体文件夹路径,传入的变量中只能为文件名,不能包含文件路径使用vite的import.meta.glob或import.meta.globEager,两者的区别是前者懒加载资源,后者直接引入。

复制代码
这里我们假设:
工具文件目录: src/util/pub-use.ts
pub-use.ts

// 获取assets静态资源
export default const getAssetsHomeFile = (url: string) => {
    const path = `../assets/images/home/${url}`;
    const modules = import.meta.globEager("../assets/images/home/*");
    return modules[path].default;
}

使用

复制代码
import usePub from '@/util/public-use'
setup () {
  const Pub = usePub()
  const getAssetsHomeFile = Pub.getAssetsHomeFile 
  return { getAssetsHomeFile }
}

不能包含文件路径

复制代码
<img :src="getAssetsHomeFile('icon.png')" />

补充:如果是背景图片引入的方式(一定要使用相对路径)
.imgText {
  background-image: url('../../assets/images/1462466500644.jpg');
}

生产环境会自动加上hash,并且路径正确使用绝对路径在开发环境能够正常显示,但将导致打包后的路径不正确

相关推荐
小桥风满袖19 分钟前
极简三分钟ES6 - ES9中for await of
前端·javascript
半花36 分钟前
i18n国际语言化配置
前端
编程贝多芬39 分钟前
Promise 的场景和最佳实践
前端·javascript
Asort40 分钟前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio43 分钟前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
南雨北斗1 小时前
JS的对象属性存储器
前端
Lotzinfly1 小时前
12个TypeScript奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
开源之眼1 小时前
React中,useState和useReducer有什么区别
前端
普郎特1 小时前
"不再迷惑!用'血缘关系'彻底搞懂JavaScript原型链机制"
前端·javascript
可观测性用观测云1 小时前
前端错误可观测最佳实践
前端