VitePress-09-文档中引入静态资源-图片-相对路径的方式

news2024/11/19 19:18:01

补充-markdown文档中引入图片的格式

格式如下 :![图片异常时展示的文案](图片资源的路径)
图片资源的路径 : 可以是【绝对路径】,也可以是【相对路径】,关键是可以正确的找到该资源。

引入静态资源的说明

需要注意的是,静态资源的引入,核心是需要确定正确的路径
路径都需要 依据 当前的工作目录的结构

案例展示

本案例展示 普通的静态图片资源的引入,使用相对路径的方式。
因此,需要特别注意【项目结构】,以此来确定资源的路径。

项目结构

下面的结构,精简的展示了主要用到的文件。

ProjectName
	| -- helloworld.md  # 主要的md文件
	| -- srca
		| -- abc.jpg    # 要引入的静态图片的文件

文档内容


# 静态资源-相对路径直接使用
> 下面是一张图片

![一张图片](./srca/abc.jpg)

效果展示

图片展示正常

在这里插入图片描述

最后的说明

使用相对路径的这种方式,就像在普通的vue项目中使用是一样的。
在项目打包之后,会被复制到输出目录,并使用哈希文件名。
从未使用过的资源将不会被复制。
小于 4kb 的图像资源将会采用 base64 内联(这个可以在vite的配置中进行修改)。

下面是本文中涉及的内容打包之后的目录(节选了一部分):
我们引用的静态资源文件被放在了 assets目录下,且文件名称以哈希值命名。

在这里插入图片描述

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

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

相关文章

第01课:自动驾驶概述

文章目录 1、无人驾驶行业概述什么是无人驾驶智慧出行大趋势无人驾驶能解决什么问题行业趋势无人驾驶的发展历程探索阶段(2004年以前)发展阶段(2004年-2016年)成熟阶段(2016年以后) 2、无人驾驶技术路径无人…

【码农新闻】 用HTTPS,还能被查出浏览记录吗 常用且好用的在线工具......

目录 【码农新闻】 用HTTPS,还能被查出浏览记录吗 常用且好用的在线工具...... 用HTTPS,还能被查出浏览记录吗常用且好用的在线工具尤雨溪 文章所属专区 码农新闻 欢迎各位编程大佬,技术达人,以及对编程充满热情的朋友们&#xf…

代码随想录算法训练营第一天 | 数组理论基础,704. 二分查找,27. 移除元素

704. 二分查找 给定一个 n 个元素有序的(升序)整型数组 nums 和一个目标值 target ,写一个函数搜索 nums 中的 target,如果目标值存在返回下标,否则返回 -1。 示例 1: 输入: nums [-1,0,3,5,9,12], target 9 输出…

c#cad 创建-文本(一)

运行环境 vs2022 c# cad2016 调试成功 一、代码说明 该代码是一个用于在AutoCAD中创建文本的命令。 首先,通过添加using语句引用了需要使用的Autodesk.AutoCAD命名空间。 然后,在命名空间CreateTextInCad下定义了一个名为CreateTextCommand的类&…

01背包问题 动态规划

01背包问题 动态规划 01背包问题 动态规划写了点代码 C#实现程序运行结果代码和程序已经上传 01背包问题 动态规划 很有意思的问题。 写了点代码 C#实现 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Ta…

java之spring事务管理

spring事务管理 1. 事务概念 事务是一组操作的集合,是一个不可 分割的工作单位, 这些操作,要么同时成功,要么同时失败 和mysql数据库的事务管理道理一样。开启事务 start 提交事务 commit 回滚事务 rollback2.操作实现 Transa…

系统架构设计师考试大纲2023

一、 考试方式(机考) 考试采取科目连考、 分批次考试的方式, 连考的第一个科目作答结束交卷完成后自动进 入第二个科目, 第一个科目节余的时长可为第二个科目使用。 高级资格: 综合知识科目考试时长 150 分钟&#xff…

8868体育助力意甲国际米兰俱乐部 国米成功续约球员

意甲的国际米兰俱乐部是8868合作体育球队之一,根据国米新闻网站的消息,在与劳塔罗、巴雷拉续签之前,国际米兰将会首先签下约迪马尔科。 有消息说,国际米兰的确有和巴雷拉续约的打算,但是根据国际米兰的计划&#xff0…

YoloV8改进策略:Neck改进:HAM混合注意力机制改进YoloV8|多种改进,多种姿势涨点|代码注释详解

摘要 HAM通过快速一维卷积来缓解通道注意机制的负担,并引入通道分离技术自适应强调重要特征。HAM作为通用模块,在CIFAR-10、CIFAR-100和STL-10数据集上实现了SOTA级别的分类性能。 论文链接:https://www.sciencedirect.com/science/article/abs/pii/S0031320322002667?vi…

迁移学习实现图片分类任务

导入工具包 import time import osimport numpy as np from tqdm import tqdmimport torch import torchvision import torch.nn as nn import torch.nn.functional as Fimport matplotlib.pyplot as plt %matplotlib inline# 忽略烦人的红色提示 import warnings warnings.fi…

Haas 开发板连接阿里云上传温湿度和电池电压

目录 一、在阿里云上创建一个产品 二、开发环境的介绍 三、创建wifi示例 四、编写SI7006和ADC驱动 五、wifi配网 六、主要源码 七、查看实现结果 一、在阿里云上创建一个产品 登录自己的阿里云账号, 应该支付宝,淘宝账号都是可以的。 接着根据需求…

【leetcode题解C++】77.组合 and 216.组合总和III and 17.电话号码的字母组合

77. 组合 给定两个整数 n 和 k,返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 示例 1: 输入:n 4, k 2 输出: [[2,4],[3,4],[2,3],[1,2],[1,3],[1,4], ] 示例 2: 输入&#xff1a…

5 分钟让你了解什么是搜索引擎

文章目录 搜索引擎概述基于业务模式分类垂直搜索(垂搜)通用搜索(通搜)本地搜索引擎 基于技术实现分类基于关键词的搜索引擎(Keyword-based Search Engine)语义搜索引擎(Semantic Search Engine&…

LeetCode 热题 100 | 链表(中下)

目录 1 19. 删除链表的倒数第 N 个节点 2 24. 两两交换链表中的节点 3 25. K 个一组翻转链表 4 138. 随机链表的复制 菜鸟做题第三周,语言是 C 1 19. 删除链表的倒数第 N 个节点 到底是节点还是结点。。。 解题思路: 设置双指针 left 和 ri…

ReactNative实现一个圆环进度条

我们直接看效果,如下图 我们在直接上代码 /*** 圆形进度条*/ import React, {useState, useEffect} from react; import Svg, {Circle,G,LinearGradient,Stop,Defs,Text, } from react-native-svg; import {View, StyleSheet} from react-native;// 渐变色 const C…

少儿编程教育新趋势:信息学奥赛与Scratch等级考试融合实践

近年来,信息学奥林匹克竞赛(简称信息学奥赛)以其独特的魅力吸引了大量热爱编程的青少年参与。这项赛事不仅考察参赛者的编程技能,更注重逻辑思维能力、问题解决能力和创新能力的培养。通过参加信息学奥赛,孩子们能够在…

OpenGL 入门(九)—Material(材质)和 光照贴图

文章目录 材质设置材质光的属性脚本实现 光照贴图漫反射贴图高光反射贴图 材质 材质本质是一个数据集,主要功能就是给渲染器提供数据和光照算法。 如果我们想要在OpenGL中模拟多种类型的物体,我们必须针对每种表面定义不同的材质(Material)属性。 我们…

设计模式1-访问者模式

访问者模式是一种行为设计模式,它允许你定义在对象结构中的元素上进行操作的新操作,而无需修改这些元素的类。这种模式的主要思想是将算法与元素的结构分离开,使得可以在不修改元素结构的情况下定义新的操作。 所谓算法与元素结构分离&#x…

不会PS怎么抠图?分享几个电商抠图的方法

在工作中,物品抠图是一项常见的任务。为了更好地展示物品,需要将其从背景中抠出来,以便与其他元素进行组合或展示。但是,手动抠图不仅费时费力,而且效果往往不尽如人意。这时,一款强大的物品抠图软件就成为…

【数据结构与算法】(10)基础数据结构 之 堆 建堆及堆排序 详细代码示例讲解

目录 2.9 堆建堆习题E01. 堆排序E02. 数组中第K大元素-Leetcode 215E03. 数据流中第K大元素-Leetcode 703E04. 数据流的中位数-Leetcode 295 2.9 堆 以大顶堆为例,相对于之前的优先级队列,增加了堆化等方法 public class MaxHeap {int[] array;int siz…