测试-嵌入式图床外链

个人博客：alvincr.com

原始效果：https://alvincr.com/2021/01/test-picture-outside-chain/

直接转存可视化效果：

-----------------------------------------

注意：请务必查看附录（1有趣的现象），如果出现此类现象，而又需要外链，那么必须关闭自动保存函数。

本文按照以下顺序添加嵌入式代码以便查看效果

注意这里要选择文本，而非可视化，

 

 

图片链接

图片链接是直接在浏览器中输入的链接，因此可以直接插入可视化中：

可视化效果：

https://ibb.co/qWYFSDJ

文本效果：
https://ibb.co/qWYFSDJ
对比html可以看出，使用文本项必须按照html的格式来进行书写，否则只会认为是字符串不进行失败。

例如添加< a href = "https://ibb.co/qWYFSDJ">
< a href = "https://ibb.co/qWYFSDJ">

HTML

选择可视化添加代码效果：

<a href="https://imgbb.com/"><img src="https://alvincr.com/wp-content/uploads/2021/01/thumbnail-5404301e8a19ffd408303f7e0aecab6b.jpg" alt="thumbnail-5404301e8a19ffd408303f7e0aecab6b" border="0" /></a>

选择文本添加效果：

 

 

 

BBCode

BBCode是Bulletin Board Code的缩写，有译为「BB代码」者，属于轻量标记语言（Lightweight Markup Language）的一种，如字面上所显示的，它主要是使用在BBS、论坛、Blog等网络应用上。BBcode的语法通常为 [标记] 这种形式，即语法左右用两个中括号包围，以作为与正常文字间的区别。系统解译时遇上中括号便知道该处是BBcode，会在解译结果输出到用户端时转换成最为通用的HTML语法。

个人认为选择html标签就好，BBCode对于网站来说比较麻烦。

选择可视化：

[url=https://imgbb.com/][img]https://alvincr.com/wp-content/uploads/2021/01/thumbnail-5404301e8a19ffd408303f7e0aecab6b.jpg[/img][/url]

选择文本：
[url=https://imgbb.com/][img]https://alvincr.com/wp-content/uploads/2021/01/thumbnail-5404301e8a19ffd408303f7e0aecab6b.jpg[/img][/url]

 

 

 

附：

1 有趣的现象

你看我在添加下文html之后，由于我设置自动保存外链图片到本地，所以嵌入更新之前和之后的代码是不一样的。

测试之前<a href>标签引用的是imgbb.com的数据，更新本文之后就变成了alvincr.com上传文件夹中的数据了。这样能够有效的保证图片不丢失，但是对于本文来说是个灾难。

测试：

之前：

[caption id="attachment_2590" align="aligncenter" width="869"]

之后：

[/caption]

 

 

------------------------------------------------------------------

直接转存文本代码效果：

注意：请务必查看附录（1有趣的现象），如果出现此类现象，而又需要外链，那么必须关闭自动保存函数。

本文按照以下顺序添加嵌入式代码以便查看效果

<img class="alignnone wp-image-2583 size-full" src="https://alvincr.com/wp-content/uploads/2021/01/Pasted-into-测试-嵌入式图床外链.png" />

注意这里要选择文本，而非可视化，

<img class="alignnone wp-image-2585 size-full" src="https://alvincr.com/wp-content/uploads/2021/01/Pasted-into-测试-嵌入式图床外链-1.png" />
<h2>图片链接</h2>
图片链接是直接在浏览器中输入的链接，因此可以直接插入可视化中：

可视化效果：

https://ibb.co/qWYFSDJ

文本效果：
https://ibb.co/qWYFSDJ
对比html可以看出，使用文本项必须按照html的格式来进行书写，否则只会认为是字符串不进行失败。

例如添加&lt; a href = "https://ibb.co/qWYFSDJ"&gt;
&lt; a href = "https://ibb.co/qWYFSDJ"&gt;
<h2>HTML</h2>
选择可视化添加代码效果：

&lt;a href="https://imgbb.com/"&gt;&lt;img src="https://alvincr.com/wp-content/uploads/2021/01/thumbnail-5404301e8a19ffd408303f7e0aecab6b.jpg" alt="thumbnail-5404301e8a19ffd408303f7e0aecab6b" border="0" /&gt;&lt;/a&gt;

选择文本添加效果：
<a href="https://imgbb.com/"><img src="https://alvincr.com/wp-content/uploads/2021/01/thumbnail-5404301e8a19ffd408303f7e0aecab6b.jpg" alt="thumbnail-5404301e8a19ffd408303f7e0aecab6b" border="0" /></a>

&nbsp;

&nbsp;

&nbsp;
<h2>BBCode</h2>
<blockquote>BBCode是Bulletin Board Code的缩写，有译为「BB代码」者，属于轻量标记语言（Lightweight Markup Language）的一种，如字面上所显示的，它主要是使用在BBS、论坛、Blog等网络应用上。BBcode的语法通常为 [标记] 这种形式，即语法左右用两个中括号包围，以作为与正常文字间的区别。系统解译时遇上中括号便知道该处是BBcode，会在解译结果输出到用户端时转换成最为通用的HTML语法。</blockquote>
个人认为选择html标签就好，BBCode对于网站来说比较麻烦。

选择可视化：

[url=https://imgbb.com/][img]https://alvincr.com/wp-content/uploads/2021/01/thumbnail-5404301e8a19ffd408303f7e0aecab6b.jpg[/img][/url]

选择文本：
[url=https://imgbb.com/][img]https://alvincr.com/wp-content/uploads/2021/01/thumbnail-5404301e8a19ffd408303f7e0aecab6b.jpg[/img][/url]

&nbsp;

&nbsp;

&nbsp;
<h1>附：</h1>
<h2>1 有趣的现象</h2>
你看我在添加下文html之后，由于我设置自动保存外链图片到本地，所以嵌入更新之前和之后的代码是不一样的。

测试之前&lt;a href&gt;标签引用的是imgbb.com的数据，更新本文之后就变成了alvincr.com上传文件夹中的数据了。这样能够有效的保证图片不丢失，但是对于本文来说是个灾难。

测试：
<a href="https://imgbb.com/"><img src="https://alvincr.com/wp-content/uploads/2021/01/thumbnail-5404301e8a19ffd408303f7e0aecab6b.jpg" alt="thumbnail-5404301e8a19ffd408303f7e0aecab6b" border="0" /></a>

之前：

[caption id="attachment_2590" align="aligncenter" width="869"]<img class="size-full wp-image-2590" title="测试-嵌入式图床外链" src="https://alvincr.com/wp-content/uploads/2021/01/测试-嵌入式图床外链20210111.png" alt="测试-嵌入式图床外链" width="869" height="170" /> 之后：[/caption]

<img class="alignnone wp-image-2593 size-full" src="https://alvincr.com/wp-content/uploads/2021/01/Pasted-into-测试-嵌入式图床外链-4.png" />