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.getAssetsFilereturn { 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,并且路径正确使用绝对路径在开发环境能够正常显示,但将导致打包后的路径不正确

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/52434.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python实现打印http请求信息例子解析

示例代码 import http.clientdef print_http_info(host, path):conn http.client.HTTPConnection(host)method GETurl pathprint(f"{- * 30} 请求信息 {- * 30}")print(f"主机: {host}")print(f"方法: {method}")print(f"URL: {url}&qu…

深入理解Spring Boot日志框架与配置

目录 Spring Boot日志框架概述Spring Boot默认日志框架&#xff1a;Logback日志配置文件日志级别的调整日志输出配置日志格式化日志轮转和归档集成其他日志框架日志管理工具最佳实践总结 Spring Boot日志框架概述 Spring Boot 支持多种日志框架&#xff0c;如 Logback、Log4…

使用HAL库实现按键控制LED和蜂鸣器

下载STM32CubeMX实现项目的初始配置&#xff08;寄存器操作)&#xff0c;下载keil对程序进行编译烧写 在STM32CubeMX中将PB0/PB1设置为输入引脚作为按键&#xff0c;PA6/PA4设置为输出引脚作为led和Beep&#xff0c;将按键引脚设置为上拉输入&#xff1a; 创建项目完成后在kei…

【jvm】程序计数器的特征

目录 1. 说明2. 线程私有3. 存储指令地址4. 不会发生内存溢出5. 生命周期与线程相同 1. 说明 1.JVM&#xff08;Java虚拟机&#xff09;中的程序计数器&#xff08;Program Counter Register&#xff09;&#xff0c;简称PC寄存器&#xff0c;具有几个显著的特征&#xff0c;这…

C语言 | Leetcode C语言题解之第365题水壶问题

题目&#xff1a; 题解&#xff1a; bool canMeasureWater(int jug1Capacity, int jug2Capacity, int targetCapacity) {int j1 jug1Capacity < jug2Capacity ? jug1Capacity : jug2Capacity, j2 jug1Capacity > jug2Capacity ? jug1Capacity : jug2Capacity;if (ta…

Umi-OCR 文字识别工具

免费开源的离线orc识别功能 git地址 感谢大佬的贡献 Umi-OCR 文字识别工具 使用说明 • 下载地址 • 更新日志 • 提交Bug 免费&#xff0c;开源&#xff0c;可批量的离线OCR软件 适用于 Windows7 x64 、Linux x64 免费&#xff1a;本项目所有代码开源&#x…

推荐系统三十六式学习笔记:产品篇36 | 组建推荐团队及工程师的学习路径

目录 团队组建个人成长总结 如果你是老板&#xff0c;或者是公司里的推荐系统包工头&#xff0c;那么你一定会关心&#xff1a;要凑齐多少人才能开始搬砖&#xff1f; 一个推荐系统复杂度没有上限&#xff0c;但是有最低标准&#xff0c;所以下面在估算推荐系统团队规模时&…

SpringBoot (面试篇)

什么是SpringBoot 通过SpringBoot&#xff0c;可以轻松的创建独立的&#xff0c;基于生产级别的Spring的应用程序&#xff0c;您可以“运行”它们。大多数SpringBoot应用程序要最少的Sprig配置 为什么要用SpringBoot 快速开发 快速整合 配置简化 内嵌服务容器 SpringBoot与…

Verilog刷题笔记59

题目: Exams/m2014 q6c 解题&#xff1a; module top_module (input [6:1] y,input w,output Y2,output Y4);assign Y2y[1]&w0;assign Y4(y[2]&w1)|(y[3]&w1)|(y[5]&w1)|(y[6]&w1);endmodule结果正确: 注意点: 起初&#xff0c;我的代码有错误,代码如下…

9 正则表达式:Java爬虫和正则表达式、String中的正则表达式方法(基本语法7)

文章目录 前言一、正则表达式1 [ ] 语法(1)[ABC] 和 [^ABC](2)[A-Z]和[a-zA-Z]小总结2 特殊字符语法(\w 这些)3 数量符4 \ 、()、 |5 锚点 ^ 和 $,\b,\B6 (?i) : 忽略其后面的大小写 ---- 这个Java是可以的,其他语言我不知道(正则表达式虽然大多通用,但也有部分是…

视频检索技术为电子商务直播领域带来了前所未有的革新

视频检测在这个场景中指的是通过视频流实时识别和检索直播中销售人员展示的商品。这涉及到从连续的视频帧中分析和识别商品的视觉内容&#xff0c;通常与语音和文本数据结合&#xff0c;以提高识别准确性。 技术原理 文本引导的注意机制&#xff1a;这一机制通过直播中销售人员…

Prometheus学习

监控架构介绍&#xff1a; 基本架构&#xff1a; Prometheus 和 Zabbix 的对比&#xff1a; 安装和使用&#xff1a; Prometheus 采集、存储数据Grafana 用于图表展示alertmanager 用于接收 Prometheus 发送的警告信息node-exporter 用于收集操作系统和硬件信息的 metrics …

猫头虎 分享:Python库 Matplotlib 的简介、安装、用法详解入门教程

&#x1f42f; 猫头虎 分享&#xff1a;Python库 Matplotlib 的简介、安装、用法详解入门教程 今天猫头虎 带大家一起探索一个非常重要的 Python 库——Matplotlib。这是一个强大的工具&#xff0c;广泛应用于数据科学、人工智能和机器学习等领域&#xff0c;用于创建静态、动…

Node.js中的pipe方法:深入解析与应用指南

在Node.js中&#xff0c;pipe方法是处理流&#xff08;Stream&#xff09;数据的一种非常高效的方式。它允许你将一个可读流&#xff08;Readable Stream&#xff09;的数据直接传输到一个可写流&#xff08;Writable Stream&#xff09;中&#xff0c;而无需手动编写读取和写入…

3、springboot时代背景

一、微服务 二、分布式 三、云原生 原生应用如何上云。 Cloud Native 上云的困难 服务自愈弹性伸缩服务隔离自动化部署灰度发布流量治理...... 上云的解决

怎样更改电脑的MAC地址?

怎样更改电脑的MAC地址&#xff1f; 电脑的机器码是可以修改的。 操作步骤&#xff1a; 1、通过按WINR键&#xff0c;调来电脑的接运行窗口&#xff0c;打开CMD命令来查看机器码。 2、命令提示符窗口里输入ipconfig /all&#xff0c;回车&#xff0c;即可显示出当前电脑的网…

wpf UniformGrid 动态加载数据

在WPF中&#xff0c;如果你想要在UniformGrid内部为每个Model对象放置一个Panel&#xff08;比如StackPanel或Grid&#xff09;&#xff0c;并且这些Panel是通过数据绑定动态生成的&#xff0c;你需要结合使用ItemsControl、DataTemplate以及UniformGrid。但是&#xff0c;由于…

调试理解 NodeJS 模块机制

前言 通过断点调试理解 NodeJS & CommonJS 的模块机制&#xff0c;先说结论&#xff1a; NodeJS 中每个文件视作一个模块&#xff0c;每个模块默认可以访问 module、exports、require、__filename、__dirname 变量NodeJS 中通过将模块源码包裹在 Wrapper 函数中&#xff…

【每日一题】【素数筛板子题】又是一年毕业季 牛客小白月赛99 D题 C++

牛客小白月赛99 D题 又是一年毕业季 题目背景 牛客小白月赛99 题目描述 样例 #1 样例输入 #1 3 4 2 4 6 5 5 6 2 5 3 2333333 8 11 4 5 14 19 19 8 10样例输出 #1 3 7 2做题思路 首先观察到 即需要保证拍照的时刻 大于等于 2 那么就从2开始往上走&#xff0c;如果有人…

[CLIP-VIT-L + Qwen] 多模态大模型源码阅读 - 语言模型篇(2)

多模态学习笔记-语言模型篇&#xff08;2&#xff09; 参考repo:WatchTower-Liu/VLM-learning; url:vlm-learning 吐槽 今天的源码看的欲仙欲死&#xff0c;NTK(neural tangent kernel), rotary_position_embedding这些在之前的学习中完全闻所未闻&#xff0c;导致看的时候一…