Search code examples
ruby-on-railswebpacker

Is it possible to get the URL of the image from the image_pack_tag?

Background

In the default packs/application.js file, you're greeted with the following comments

// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

Using these comments, I created the following JavaScript functions to include everything in app/assets/images

const images = require.context('../../assets/images', true)
const imagePath = (name) => images(name, true)

I can call the image_pack_tag helper like so:

<%= image_pack_tag 'media/images/logo.svg' %>

However, I have an HTML tag where I need to add a background. For now, it looks like so:

<section class="bg-cover" style="background-image: url(assets/img/covers/cover.jpg);">

Question

Is there a way for me to extract the path of the image from the image_pack_tag so that I can do this:

<section class="bg-cover" style="background-image: url(<%= image_pack_tag_url 'media/covers/cover.jpg' %>);">
Solution

  • Use the asset_pack_path helper. In your situation, you want to use:

    asset_pack_path 'media/covers/cover.jpg'

    In the background attribute, that becomes:

    <section class="bg-cover" style="background-image: url(<%= asset_pack_path 'media/covers/cover.jpg' %>);">