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 :(

Answer 1

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="">