Adding an image is supposed to be easy in markdown. Syntax is like:
![alt](path "title"), in which:
altis alternate text, provides alternative information for the image if user cannot view it for some reason like slow connection, wrong path or user is using screen reader;
pathis image file link, most important part;
titleis tooltip text (optional), appears when cursor is floating over the image.
In this article I will mainly talk about the image file path or link or whatever you name it. But if you want to make a quick choice in different solutions, follow the map below and jump to the section directly.
An image hosting service allows individuals to upload images to an Internet website. The image host will then store the image onto its server, and show the individual different types of code to allow others to view that image. － Wikipedia
There are websites providing this type of sevice: You upload an image file, then get the link of it, or even its markdown code directly.
![An Imgur Image](https://i.imgur.com/ucHPX7L.gif "An Imgur GIF")
In addition, you could even find editors or plugins, that will do the uploading work and insert markdown code automatically after you drag&drop or paste the image.
If you need to save the traffic of your blog site, an image hosting service may be a nice choice. However if you’re already using a static site hosting service like GitHub Pages, and don’t have that many posts and images, there is no need to save traffic at all.
First of all, this feature need to be enabled in Hexo site configuration file
Then the files in
source/_posts should look like this:
2019-02-14-Test-Post.md 2019-02-14-Test-Post/ +-- Test-Image-1.png +-- Test-Image-2.png +-- Subdirectory/ | +-- Test-Image-3.png | +-- Test-Image-4.png
You can see that post asset folder is besides the post source file, and has the same name with it.
First you need to install plugin
$ npm i --save hexo-asset-link
Then in markdown source file
source/_posts/2019-02-14-Test-Post.md, the base-relative links scheme would look like this:
!(2019-02-14-Test-Post/Test-Image-1.png) !(./2019-02-14-Test-Post/Test-Image-2.png) !(2019-02-14-Test-Post/Subdirectory/Test-Image-3.png) !(./2019-02-14-Test-Post/Subdirectory/Test-Image-4.png)
!(Test-Image-1.png) !(./Test-Image-2.png) !(Subdirectory/Test-Image-3.png) !(./Subdirectory/Test-Image-4.png)
This type of base-relative link would only works on post page, not on home page excerption or editor preview.
For images it could be
source/img or something similar. For example I place my site favison at root folder:
Pay attention to the first slash ‘/’, without it the link would be a base-relative one.
![Site Favicon](/favicon.ico "My Site Favicon")
This type of root-relative link works in blog site, but basically not in editor preview.
Here is the official documentation about this solution, I don’t even want to write it down in my own blog. Here are top comments right below the docs: