handle data attributes with webpack and vuejs

Question

I use the vue cli with webpack and I'm absolutely fine with it. But now I have a little problem!

I want that the path in the data attributes from the <object> tags are also compiled like the src attributes from the <img> tags

for example:

If I do something like this

<img src="../path/to/file.svg" alt="">

webpack compiled the path to

<img src="/dist/path/to/file.svg" alt="">

but when I do something like this:

<object type="image/svg+xml" data="../path/to/file.svg">fallback</object>

it doesn't work :(

You'll need to add a new loader rule in your webpack config such as html-loader and configure to scrape that attribute. Not behind computer so unable to provide syntax. — John
– John, Commented Mar 28, 2018 at 0:32
I try it with the html-loader. Maybe I do a mistake with the configuration, but I get an error from the babel-loader. I think the babel-loader do something with the data attribute as well. If I try the example from here I only get a blank page — kayza
– kayza, Commented Mar 28, 2018 at 9:23

Ru Chern Chong · Accepted Answer · 2018-03-28 00:59:20Z

3

Use the require() helper

Example:

<object :data="require(`../path/to/file-${if-you-need-to-pass-a-variable-here}.svg`)" type="image/svg+xml" >fallback</object>

<img :src="require(`../path/to/file-${if-you-need-to-pass-a-variable-here}.svg`)" alt="">

answered Mar 28, 2018 at 0:59

Ru Chern Chong

3,77613 gold badges36 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1