vue 项目打包图片没有打包进去问题解决

问题

vue 项目打包,项目中引用了的图片没有被打进包里,导致打包后的项目图片缺失。

解决方法

1、在导入图片的文件中通过 import 引入图片

这种方法只适合图片少的情况

<template><img :src='testImg'/>
</template><script>import testImg from '@/assets/img/testImg.png'
</script>

2、封装公共方法,通过 new URL() 的方式获取图片

const getImg = (url: string) => {return new URL(`../assets/img/${url}`, import.meta.url).href;
};const testImg = getImg('testImg')

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

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

相关文章

yml配置文件中常见的配置及含义

1.数据库连接的相关配置 项目名称:datasource:driver-class-name: com.mysql.cj.jdbc.Driverhost: localhostport: 3306database: 数据库名username: 用户名password: 密码 springboot配置文件,用于配置数据库源连接信息 数据库驱动类型为com.mysql.cj.jdbc.Driver,这是数据…

redis的搭建 RabbitMq搭建 Elasticsearch 搭建

官网 Download | Redis wget https://github.com/redis/redis/archive/7.2.4.tar.gz 编译安装 yum install gcc g tar -zxvf redis-7.2.4.tar.gz -C /usr/localcd /usr/local/redis make && make install 常见报错 zmalloc.h:50:10: fatal error: jemalloc/jemal…

前端学习——JS学习

文章目录 1. 定义变量&#xff0c;关键字 var、let、const2. 定义变量&#xff0c;数据类型3. 数组变量的操作4. 对象的操作5. JSON 字符串 1. 定义变量&#xff0c;关键字 var、let、const 这里主要是对var、let做比较 /** 1. var存在变量提升、let不存在变量提升 **/ cons…

校招面试Java、springboot、mysql基本问题

这里有一些常见的Java、Spring Boot和MySQL面试问题&#xff1a; Java面试问题&#xff1a; Java中的基本数据类型有哪些&#xff1f;什么是Java中的自动装箱和拆箱&#xff1f;什么是面向对象编程&#xff1f;Java中的面向对象编程有哪些特性&#xff1f;Java中的异常处理机…

Minimize Inversions

先来看看官方题解的做法&#xff0c;他一反常态的没有在逆序对题目里面考虑每个位置的贡献&#xff0c;而是直接回到定义考虑每对数是否是逆序对 我们考虑原数列中任意的一组数\((a_i,a_j)\)和\((b_i,b_j)\)。如果最开始两个都不是逆序对&#xff0c;那么交换之后两个都是逆序对…

前端面试常考之——Vue前端路由权限控制(vuex版本)

文章目录 前端权限控制思路1. 菜单的权限控制 Vue的权限控制实现1. 菜单的控制2. 界面的控制3. 按钮的控制4. 请求和响应的控制请求控制响应控制 小结 前端权限控制思路 1. 菜单的权限控制 菜单的控制 在登录请求中&#xff0c;会得到权限数据&#xff0c;当然&#xff0c;这…

python中停止线程的方法

文章目录 1 threading.Event()方法2 子线程抛出异常&#xff0c;立刻停止 1 threading.Event()方法 一种常见的方法是使用标志位来通知线程应该停止。线程可以定期检查这个标志位&#xff0c;如果它被设置为停止&#xff0c;那么线程就结束其执行。下面是一个简单的例子&#…

NXP实战笔记(八):S32K3xx基于RTD-SDK在S32DS上配置LCU实现ABZ解码

目录 1、概述 2、SDK配置 2.1、IO配置 2.2、TRGMUX配置 2.3、LCU配置 2.4、Trgmux配置 2.5、Emios配置 2.6、代码实现 1、概述 碰到光电编码器、磁编码器等,有时候传出来的位置信息为ABZ的方式,在S32K3里面通过TRGMUX、LCU、Emios结合的方式可以实现ABZ解码。 官方…

HCIA(11)OSPF 数据包构成(Hello、DBD、LSR、LSU、LSAck包)、状态机、工作流程(建立邻居关系、主从关系协商、LSDB同步)

OSPF&#xff08;Open Shortest Path First&#xff09;是IETF组织开发的一个基于链路状态的内部网关协议&#xff08;Interior Gateway Protocol&#xff09;。 目前针对IPv4协议使用OSPF Version 2&#xff0c;针对IPv6协议使用OSPF Version 3。 在OSPF出现前&#xff0c;网络…

C++的list容器->基本概念、构造函数、赋值和交换、大小操作、插入和删除、数据存取、反转和排序、排序案例

#include<iostream> using namespace std; #include <list> //list容器构造函数 void printList(const list<int>& L) { for (list<int>::const_iterator it L.begin(); it ! L.end(); it) { cout << *it << "…

Unix与Linux区别

目录 历史和所有权 内核 发行版 开源性质 用户群体 命令行界面 历史和所有权 Unix&#xff1a; Unix是一个操作系统家族的名称&#xff0c;最早由贝尔实验室&#xff08;Bell Labs&#xff09;的肖像电机公司&#xff08;AT&T&#xff09;开发。最早的Unix版本是在19…

如何在MATLAB中创建一个矩阵?如何在MATLAB中执行矩阵运算?如何在MATLAB中绘制图形?

如何在MATLAB中创建一个矩阵&#xff1f; 在MATLAB中创建一个矩阵有多种方法。以下是一些常见的方法&#xff1a; 直接输入矩阵元素&#xff1a; 你可以直接在MATLAB命令窗口中输入矩阵的元素&#xff0c;每个元素之间用空格或逗号分隔&#xff0c;不同行之间用分号分隔。 A …

研究生摆烂摆烂的一个寒假

寒假&#xff1a;27-24&#xff0c;不到一个月 刚回家&#xff0c;不想学习&#xff0c;摆烂 想学了&#xff0c;又过年了&#xff0c;于是又开摆 又想学了&#xff0c;家里面有有点小事&#xff0c;于是又开摆 摆完&#xff0c;没想到就返校啦 期末作业没完成&#xff08…

C++ sort函数中自定义比较函数并传入变量、类的成员变量

在vector排序时候&#xff0c;有时候需要自定义排序&#xff0c;这个教程网上也很多&#xff0c;但是一般都是只使用了vector元素内部的变量&#xff0c;这里给出传入变量的实例代码 float camera_param_cx camera_param_cx_;float same_traffic_light_max_area same_traffic…

【深入理解设计模式】原型设计模式

原型设计模式 原型设计模式&#xff08;Prototype Pattern&#xff09;是一种创建型设计模式&#xff0c;它允许通过复制已有对象来创建新对象&#xff0c;而无需直接依赖它们的具体类。这种模式通常用于需要频繁创建相似对象的场景&#xff0c;以避免昂贵的创建操作或初始化过…

【办公类-16-10-02】“2023下学期 6个中班 自主游戏观察记录(python 排班表系列)

背景需求&#xff1a; 已经制作了本学期的中4班自主游戏观察记录表 【办公类-16-10-01】“2023下学期 中4班 自主游戏观察记录&#xff08;python 排班表系列&#xff09;-CSDN博客文章浏览阅读398次&#xff0c;点赞10次&#xff0c;收藏3次。【办公类-16-10-01】“2023下学…

Stable Diffusion 3的到来巩固了 AI 图像对抗 Sora 和 Gemini 的早期领先优势

Stability AI 将其更改为 Stable Diffusion 3。VentureBeat 报道称&#xff0c;Stability AI 的下一代旗舰 AI 图像生成模型将使用类似于 OpenAI 的 Sora 的扩散变压器框架。其当前模型仅依赖于扩散架构。虽然尚未发布&#xff0c;但您可以在等候名单中注册。 官方网址链接&am…

编程笔记 Golang基础 022 数组

编程笔记 Golang基础 022 数组 一、数组定义和初始化二、访问数组元素三、遍历数组四、数组作为参数六、特点七、注意事项 在Go语言中&#xff0c;数组是一种基本的数据结构&#xff0c;用于存储相同类型且长度固定的元素序列。 一、数组定义和初始化 // 声明并初始化一个整数…

Vue源码系列讲解——生命周期篇【三】(initLifecycle)

目录 1. 前言 2. initLifecycle函数分析 3. 总结 1. 前言 在上篇文章中&#xff0c;我们介绍了生命周期初始化阶段的整体工作流程&#xff0c;以及在该阶段都做了哪些事情。我们知道了&#xff0c;在该阶段会调用一些初始化函数&#xff0c;对Vue实例的属性、数据等进行初始…

Linux:Jenkins:GitLab+Maven+Jenkins的部署

1.环境 我这里准备了三台centos7 1.用于部署gitlab 运行内存&#xff1a;6G 名字&#xff1a;Jenkins-GitLab 192.168.6.1 2.用于部署jenkins 运行内存&#xff1a;2G 名字&#xff1a;Jenkins-server 192.168.6.2 3.用于打包测试…