vue图片导入的几种方式及优劣对比

1. 使用相对路径(静态资源)

直接在模板中使用图片的相对路径,例如:

<img src="./assets/logo.png" alt="Logo">
优点:
  • 简单直观,无需额外的配置。
  • 适合使用固定的、本地图片。
缺点:
  • 对于大型项目,如果资源存储路径变动,维护成本较高。
  • 打包时,路径可能会被更改,需要确保资源被正确处理(如 Webpack 或 Vite 的配置)。

2. 使用 require 动态加载图片

通过 require 引入图片:

<img :src="require('@/assets/logo.png')" alt="Logo">
优点:
  • 图片路径可以动态生成,便于组件复用。
  • We

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

开发一套ERP 第三弹 前端构建

初步确定 差不多就套用 pnpm config set registry https://registry.npmmirror.com/ pnpm 配置国内镜像源

易语言学习-cnblog

易语言数据类型 数值转换命令&#xff08;自己学&#xff09; 数值到大写&#xff08;&#xff09;将一个数值转换到中文读法&#xff0c;第二个参数为是否为简体。 数值到大写&#xff08;123.44&#xff0c;假&#xff09; 猜测结果 数值到金额&#xff08;&#xff09;将双…

uni-app 蓝牙开发

一. 前言 Uni-App 是一个使用 Vue.js 开发&#xff08;所有&#xff09;前端应用的框架&#xff0c;能够编译到 iOS、Android、快应用以及各种小程序等多个平台。因此&#xff0c;如果你需要快速开发一款跨平台的应用&#xff0c;比如在 H5、小程序、iOS、Android 等多个平台上…

浏览器缓存与协商缓存

1. 强缓存&#xff08;Strong Cache&#xff09; 定义 强缓存是指在缓存的资源有效期内&#xff0c;浏览器会直接使用缓存中的数据&#xff0c;而不会发起网络请求。也就是说&#xff0c;浏览器会直接从本地缓存读取资源&#xff0c;不会与服务器进行任何交互。 如何控制强缓…

利用adb工具安装卸载安卓平板(手机)软件

参考链接&#xff1a; 1、ADB 操作命令详解及用法大全 2、全面掌握Android调试工具箱&#xff1a;ADB与实用程序实战 平时使用小米手机没有感觉&#xff0c;miui系统做的确实好。最近买了个水货学习系统平板&#xff08;主要看重硬件配置&#xff0c;性价比很高&#xff0c;但…

使用 OpenCV 进行视频中的行人检测

在计算机视觉领域&#xff0c;行人检测是一个重要的研究方向&#xff0c;它在视频监控、自动驾驶、人机交互等领域都有着广泛的应用。本文将介绍如何使用 OpenCV 库来实现视频中的行人检测。 环境准备 首先&#xff0c;我们需要安装 OpenCV 库。可以通过以下命令来安装&#…

小柴冲刺软考中级嵌入式系统设计师系列三、嵌入式硬件设计(1)嵌入式系统电源管理

越努力&#xff0c;越幸运&#xff01; 人生的意义在于体验&#xff01; 目录 越努力&#xff0c;越幸运&#xff01; 一、电源管理 (1)系统上电行为 (2)空闲模式 (3)断电 (4)电压与频率缩放 例如 具体实现如下: ① 12V 转8V ② 12V 转-8V ③ 12V 转5V ④ 5V 转3…

大语言模型---LoRA中损失值的计算

文章目录 概要损失计算流程小结 概要 Llama-7B模型的LoRA微调训练中&#xff0c;通过使用Cross-Entropy Loss来度量模型输出的预测分布和真实标签分布之间的距离&#xff0c;来衡量模型的准确性。 本文主要介绍LoRA中损失值的计算流程。 Cross-Entropy Loss作用&#xff1a;是…

使用redis-shake工具进行redis的数据同步

前言&#xff1a; 工作中将常遇到测试环境和正式环境的数据同步或者需要进行数据迁移&#xff0c;对于mysql数据库的方案倒是不少&#xff0c;但是redis中如何快速便捷的迁移呢&#xff1f;答案是阿里云提供的:redis-shake RedisShake是阿里云基于豌豆荚开源的redis-port进行…

人工智能之数学基础:向量的基本知识

本文重点 向量的基本性质是线性代数和向量空间理论的核心,它们为向量运算提供了坚实的基础,并在物理、工程、计算机图形学等领域有着广泛的应用。本文对向量的一些基本知识进行介绍,帮助大家快速理解向量。 向量的定义与表示 向量是一个既有大小又有方向的量,通常用带箭…

《数据结构》学习系列——图(中)

系列文章目录 目录 图的遍历深度优先遍历递归算法堆栈算法 广度优先搜索 拓扑排序定义定理算法思想伪代码 关键路径基本概念关键活动有关量数学公式伪代码时间复杂性 图的遍历 从给定连通图的某一顶点出发&#xff0c;沿着一些边访问遍图中所有的顶点&#xff0c;且使每个顶点…

STM32编程小工具FlyMcu和STLINK Utility 《通俗易懂》破解

FlyMcu FlyMcu 模拟仿真软件是一款用于 STM32 芯片 ISP 串口烧录程序的专用工具&#xff0c;免费&#xff0c;且较为非常容易下手&#xff0c;好用便捷。 注意&#xff1a;STM32 芯片的 ISP 下载&#xff0c;只能使用串口1&#xff08;USART1&#xff09;&#xff0c;对应的串口…

非递归遍历二叉树(数据结构)

我的博客主页 非递归遍历二叉树 前序遍历&#xff08;迭代&#xff09;中序遍历&#xff08;迭代&#xff09;后续遍历&#xff08;迭代&#xff09; 二叉树的遍历方式有&#xff1a;前序遍历、中序遍历、后续遍历&#xff0c;层序遍历&#xff0c;而树的大部分情况下都是通过递…

对于某些原型或UI软件的个人看法(2024/11)

由于我这几天&#xff0c;一边敲代码&#xff0c;一边进行页面布局设计与编码&#xff0c;发现可能就一个卡片&#xff0c;我都得调很久样式&#xff0c;觉得这样改很累也没效率&#xff0c;页面也不是很美观。所以我想到了ui设计&#xff0c;我可以先进行ui设计&#xff0c;然…

Rocky DEM tutorial4_SAG mill 半自磨机 -后处理

文章目录 3. 后处理3.1 磨损分析 - 3D3.2 磨损分析 - 2D3.3 导出磨损后的几何3.4颗粒轨迹3.5欧拉统计3.6 能谱分析介绍Enjoy!案例链接注:案例来自于Rocky官方教程3. 后处理 3.1 磨损分析 - 3D 点击Geometries --> Mill,点击Properties,选择 add new custom property …

目标检测指标-以及YOLOv1简介

一、物体检测评估指标 1.1 IOU IOU就是交并比&#xff0c;交集和并集之比&#xff0c;GT就是Ground-Truth真实值&#xff0c;红色的就是预测值。 我们希望预测值与真实值越接近越好&#xff0c;IOU越大越好。 1.2 MAP 如上图&#xff0c;右上角Actual是真实值&#xff0c;左边…

C++:用红黑树封装map与set-2

文章目录 前言一、红黑树封装map与set中const迭代器1. 框架的搭建2. set实现const迭代器3. map实现const迭代器 二、operator[ ]1. operator[ ]要达成的样子2. insert的改变 三. 解决insert里set中的问题四. 解决map中的operator[ ]总结用红黑树封装map与set代码 前言 前面我们…

jmeter5.6.3安装教程

一、官网下载 需要提前配置好jdk的环境变量 jmeter官网&#xff1a;https://jmeter.apache.org/download_jmeter.cgi 选择点击二进制的zip文件 下载成功后&#xff0c;默认解压下一步&#xff0c;更改安装路径就行(我安装在D盘) 实用jmeter的bin目录作为系统变量 然后把这…

你最擅长使用哪个异步编程模式?

前言 异步编程模式指的是在进行异步编程时所采用的一种编程模式&#xff0c;主要包括TAP、EAP和APM三种模式。 TAP&#xff08;Task-based Asynchronous Pattern&#xff09;模式是.NET 4.0中引入的一种异步编程模式&#xff0c;它基于Task类实现&#xff0c;通过Task类的实例…

Linux高阶——1117—TCP客户端服务端

目录 1、sock.h socket常用函数 网络初始化函数 首次响应函数 测试IO处理函数 获取时间函数 总代码 2、sock.c SOCKET() ACCEPT()——服务端使用这个函数等待客户端连接 CONNECT()——客户端使用这个函数连接服务端 BIND()——一般只有服务端使用 LISTEN()——服务端…