How to load asset_pack_path images into .vue

[alexandesigner]

I'm trying to use images inside the .vue file

<img src="<%= asset_pack_path 'images/logo.svg' %>" />

How to use the tag asset_pack_path

NOTE: I know that using the relative path is possible, I'm just wondering if it's possible to use the tag inside .vue.erb

[ytbryan]

Setup: yarn add rails-erb-loader

At .vue

    <% helpers = ActionController::Base.helpers %>
    <%= helpers.image_tag "logo.svg" %>
    <img src="<%= helpers. asset_pack_path 'images/logo.svg' %>" />

At app/config/webpack/loaders/vue.js

const { dev_server: devServer } = require('@rails/webpacker').config

const isProduction = process.env.NODE_ENV === 'production'
const inDevServer = process.argv.find(v => v.includes('webpack-dev-server'))
const extractCSS = !(inDevServer && (devServer && devServer.hmr)) || isProduction

module.exports = {
  test: /\.vue(\.erb)?$/,
  use: [{
    loader: 'vue-loader',
    options: { extractCSS }
  },
  {
    loader: 'rails-erb-loader', 
    options: {
      runner: 'bin/rails runner',
      dependenciesRoot: '../app'
    }
  }
]
}

Cc usabilityhub/rails-erb-loader#53

@gauravtiwari this can be closed.

[rhys-vdw]

Suggest closing this issue in preference for usabilityhub/rails-erb-loader#33.

[gauravtiwari]

Thanks @ytbryan and @rhys-vdw for looking into this 🍰