在VSCode 中, markdown 有图片链接,但预览无法显示图片

问题

在VSCode中, 编辑MarkDown文件,加入了图片链接, 但是在预览时缺无法显示。

源文件如下:
在这里插入图片描述
预览却显示不出来:
在这里插入图片描述

原因:

是因为Visual Studio Code中的MarkDown默认配置中只允许载入安全内容。

解决方法:

输入快捷键 Ctrl + Shift + P 打开命令框,输入Markdown,选择 更改预览安全设置。
Markdown改变预览安全
Visual Studio Code 更改md预览安全设置
允许不安全内容
选中 允许不安全内容 允许通过http载入内容,就可以在md文件中正常看到图片了。

预览正常

### 如何在 VSCode 中正确显示 Markdown 文件中的图片 为了确保图像能在 VSCodeMarkdown 预览中正常显示,需遵循特定的路径设置和语法结构。 #### 图片路径配置 当链接本地图片时,推荐将图片放置于项目内的指定文件夹内。例如,在名为`assets/images/`的目录下保存所需展示的图片。使用相对路径来引用这些资源可以提高项目的可移植性和整洁度[^1]。 对于位于上述假设位置的一张名为`example.png`的图片而言,其Markdown标记应如下所示: ```markdown ![描述文字](./assets/images/example.png) ``` 此方法适用于大多数场景下的静态资源管理需求;然而,如果遇到跨平台兼容性问题或是更复杂的部署环境,则可能需要进一步调整路径策略或考虑采用绝对路径作为替代方案。 #### 插入网络图片 除了本地存储外,还可以通过URL直接嵌入互联网上的公开访问图源。这种方式特别适合临时分享用途或者是托管服务不稳定的情况。只需提供完整的HTTP(S)地址即可实现即时加载效果: ```markdown ![在线示例](https://www.example.com/path/to/image.jpg) ``` 值得注意的是,虽然这种方法简单快捷,但在正式文档编写过程中应当谨慎选用可靠的外部链接以防失效影响用户体验。 #### 使用VS Code插件增强功能 尽管默认情况下VSCode已经能够很好地支持基本的Markdown编辑与预览操作,但仍有一些第三方扩展能带来额外便利特性。比如,“Markdown All in One”提供了诸如实时同步滚动、表格辅助构建等功能,有助于提升工作效率的同时也改善了多媒体元素处理体验[^2]。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码递夫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值