Webpacker 6: Image Asset Guide
Published Dec 24th, 2020
In order to use your images and SVG files with Webpacker 6, you need to put them in the correct place and import them into your context.
We should be good here.
Note: Restart the dev server for good luck!
Add an SVG and PNG into
In one of your views, add two image tags:
<img src="<%= asset_pack_path 'media/images/icon.svg' %>" /> <img src="<%= asset_pack_path 'media/images/surf.jpg' %>" />
Reload your browser and you should see your images.
<%= asset_pack_path 'media/images/icon.svg' %> only returns a string, so if you would rather inline your SVG files you will need to refer to the Webpack Asset Modules documentation and merge your changes into your Webpack context, as explained in these Webpacker docs.
Thanks for reading! You can discuss this post using one of the links below. Additionally, it would mean a lot if you shared this post with others!
Minimalist Habit Tracker Template for Obsidian
May 12th, 2022 - 2 min read
My Twitter Avatar
May 4th, 2022 - 1 min read