[RUBY] [Rails + Webpacker] I want to use images of assets! Until you can view the image in Vue.js

When developing with Rails and Webpacker, I wondered how to read the image and examined it.

Take a look at the Webpacker README

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']

However, it affects the speed of compilation.

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.

Implementation example

PATH in webpacker.yml

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']

To use with Vue.js

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

[Rails + Webpacker] I want to use images of assets! Until you can view the image in Vue.js
[Ruby on Rails] I want to get the URL of the image saved in Active Storage
I want you to use Enum # name () for the Key of SharedPreference
I want to use a little icon in Rails
Rails The concept of view componentization of Rails that I want to convey to those who want to quit
For those who want to use MySQL for the database in the environment construction of Rails6 ~.
[Rails] I want to display the link destination of link_to in a separate tab
I want to use the sanitize method other than View.
I want to recreate the contents of assets from scratch in the environment built with capistrano
The first thing to do before you can use Rails6 Ajax
I want to change the value of Attribute in Selenium of Ruby
I want to use @Autowired in Servlet
[Rails] I want to send data of different models in a form
I tried to make full use of the CPU core in Ruby
Change the save destination of the image to S3 in the Rails app. Part 2
[RSpec] When you want to use the instance variable of the controller in the test [assigns is not recommended]
If you want to satisfy the test coverage of private methods in JUnit
I want to output the day of the week
I tried to organize the session in Rails
I want to use arrow notation in Ruby
You may not want to use the remove method in ArrayList very often
I want to var_dump the contents of the intent
When you want to use the method outside
I want you to use Scala as Better Java for the time being
[Xcode] I want to manage images in folders
How to use JQuery in js.erb of Rails6
[Rails] I want to load CSS with webpacker
I want to get the value in Ruby
I want you to put the story that the error was solved when you stabbed the charger in the corner of your head
Install multiple submit buttons in Rails View to get the value of the pressed button
[Active Admin] I want to specify the scope of the collection to be displayed in select_box
I want to use Combine in UIKit as well.
I want to use Clojure's convenient functions in Kotlin
I want to use NetBeans on Mac → I can use it!
I want to embed any TraceId in the log
I want to use fish shell in Laradock too! !!
I want to use ES2015 in Java too! → (´ ・ ω ・ `)
I want to know the answer of the rock-paper-scissors app
[Rails] I don't know how to use the model ...
I want to display the name of the poster of the comment
I want to define a function in Rails Console
I want to be aware of the contents of variables!
I want to return the scroll position of UITableView!
Use images in Rails
I tried to explain what you can do in a popular language for web development from a beginner's point of view.
I want to control the display of the upper management navigation bar (Control menu) in Liferay 7 / DXP
After posting an article with Rails Simple Calendar, I want to reflect it in the calendar.
Use JLine when you want to handle keystrokes on the console character by character in Java
I want to change the color of the upper control navigation bar (Control menu) in Liferay 7 / DXP
Why can I use the rails command installed with gem? ??
[Beginner] I want to modify the migration file-How to use rollback-
I want to set the conditions to be displayed in collection_check_boxes
[Rails] [bootstrap] I want to change the font size responsively
I want to use screen sharing on the login screen on Ubuntu 18
I want to expand the clickable part of the link_to method
I want to change the log output settings of UtilLoggingJdbcLogger
I want to use the Java 8 DateTime API slowly (now)
I want to create a form to select the [Rails] category
When you want to change the MySQL password of docker-compose
[Rails] Where to be careful in the description of validation
I want to narrow down the display of docker ps