Estimated reading time: 2 minutes
Nearly all content is enhanced when accompanied by informative or supportive images, videos or animations. There can be added easily to any page:
You store all of your static content such as images, css, js, videos etc in the static folder.
They can be used in the content files by:
![image alt text](/img/my_img1.jpg).
The image path needs to be relevant to the outputted path and not the development path, so if you added your image and it has a path of
/static/img/img1.jpg in the dev then you would use a pth of
/img/img1.jhpg in your content page as hugo will copy this image to
public/img/img1.jpg which makes sense although the actual path is
NOTE The markdown preview won’t be able to show the image!
<img class="can-add-class" src="/img/img1.jpg" />
The bonus to this method is that you have the full control so you can resize etc.
<img src="/img/img1.jpg" width="200px" height="auto" />
Note that these static files can be added to other pages other than just content pages. so if you want images, js or css files linked to the header then the process is exactly the same.
Part 12 of 15 in the hugo zero to hero series.