Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Vue-loader transformToRequire to resolve img paths

See original GitHub issue

Hello,

I have tried a few different ways to configure this but can’t seem to find a good example.

Is this proper in my webpack.config.js

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {},
          transformToRequire: {
            img: 'src',
            image: 'xlink:href',
            'b-img': 'src',
            'b-img-lazy': ['src', 'blank-src'],
            'b-card': 'img-src',
            'b-card-img': 'img-src',
            'b-carousel-slide': 'img-src',
            'b-embed': 'src'
          }
        }
      }
    ],
    plugins: [
      // make sure to include the plugin for the magic
      new VueLoaderPlugin()
    ]
  }
}

Issue Analytics

State:
Created 5 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

3reactions

samielhinicommented, Jan 6, 2019

This is how you get this to work if you created your project with vue-cli.

If you don’t already have one, create a file called vue.config.js in the root of your project and put the following in the file:

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .options({
        transformAssetUrls: {
          video: ['src', 'poster'],
          source: 'src',
          img: 'src',
          image: 'xlink:href',
          'b-img': 'src',
          'b-img-lazy': ['src', 'blank-src'],
          'b-card': 'img-src',
          'b-card-img': 'img-src',
          'b-carousel-slide': 'img-src',
          'b-embed': 'src'
        }
      })
  }
}

0reactions

samielhinicommented, Jan 6, 2019

I am doing more research on this. None of these options are working. I think I need to use the changing syntax in vue.config.js.

Top Results From Across the Web

Asset URL Handling - Vue Loader

Transform Rules. Asset URL transforms adhere to the following rules: If the URL is an absolute path (e.g. /images/foo.png ), it will be...

How to change the src attribute of <img> in .vue files with ...

vue files, I need to modify the url contained in the src attribute of the <img> tags according to the environment of my...

Component img src resolving | Reference - BootstrapVue

Using require to resolve image paths. If you cannot set the transformAssetUrls in your view-loader config, you can alternatively use the require method:....

Resolve vuejs paths in tags that are set in transformasseturls

Here list of default tags that are transformed and processed by webpack ( so it should resolve like they are used in require...

html-loader - webpack

You may need to specify loaders for images in your configuration (recommended ... The `resourcePath` argument contains a path to the loaded HTML...