When developing with Rails and Webpacker, I wondered how to read the image and examined it.
See Paths> resolved in the README of Webpacker, and it says that if you want to share images with an app that has assets, you can write
webpacker.yml. This time, I learned from this and implemented it.
As below ...
Please be careful when adding paths here otherwise it will make the compilation slow, consider adding specific paths instead of whole parent directory if you just need to reference one or two modules
It seems that compiling will be slow if you read in units of large directories. I want to be careful when I care about the display speed.
As we saw above, we will write it in
webpacker.yml. This time, I only need the subordinates under
assets/images, so I tried to specify the path to images in consideration of the above points.
This time, I wanted to load it with a Vue.js component, so I will write it together.
<template> <div> <!--In src with img tag"~"Specify the imported file with--> <img src="~logo.svg" /> </div> </template> <script> import 'logo.svg'; //Import here </script>
It's very simple to write like this.
As mentioned above, I hope it will be helpful as much as possible.