【无标题】

最新推荐文章于 2025-01-22 10:57:17 发布

DUOUD

最新推荐文章于 2025-01-22 10:57:17 发布

阅读量345

点赞数

分类专栏：程序设计文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_52108067/article/details/131258456

版权

程序设计专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章介绍了如何将Typora笔记中的图片从绝对路径改为相对路径，以提高笔记的可移植性和共享性。通过设置图片存储位置为相对路径，并使用一段JavaScript代码模拟对所有图片进行右键保存到assets目录，可以批量完成转换。此外，提到插入网络图片URL作为替代方案，便于在线分享。

摘要由CSDN通过智能技术生成

前言

前言
在使用typora做笔记时，发现里面图片使用的是绝对路径
在这里插入图片描述
D:\myfile\Desktop\超新学习通.webp
使用绝对路径不方便的点：

本地图片的路径不能随便改。如果无意间删了，那笔记的图片就显示不了。
将笔记整理到其他设备或分享给他人时，必须保证另一个设备有相同的文件夹目录，例如：D:\myfile\Desktop\。且图片在这个文件夹下，否则文件打不开。

所以最好改成相对路径。

改成相对路径步骤

①设置插入图片时的图片的存储位置（相对路径）在这里插入图片描述
设置后插入图片后，将自动把图片自动保存到./resource/${filename}/assets/目录下，若没有该目录会自动创建。假设你Test.md文件(文件名为Test)路径为D:\myfile\Desktop\
则图片将被保存在D:\myfile\Desktop\resource\Test\assets目录下。

将原来的绝对路径图片改为相对路径

之前都使用绝对路径，现在设置了存为相对路径下。如何将之前的图片改为相对路径下。右键图片，然后点复制到assets.
在这里插入图片描述

之前太多图片都是使用绝对路径，一个个点太麻烦怎么办

先打开调试模式，再调出开发工具的控制台

在这里插入图片描述

在控制台输入如下代码后回车：

let contextmenuEvent = new MouseEvent("contextmenu", {
    bubbles: true,
    cancelable: true,
    view: window
});
let element=document.querySelectorAll("img")
for(let i=0;i<element.length-1;i++){
    element[i].dispatchEvent(contextmenuEvent);
}