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 resolved_paths in webpacker.yml. This time, I learned from this and implemented it.
config/webpacker.yml
resolved_paths: ['app/assets']
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.
config/webpacker.yml
resolved_paths: ['app/assets/images']
This time, I wanted to load it with a Vue.js component, so I will write it together.
sample.vue
<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.
Recommended Posts