What is the correct way to access static content in VUE2?

Question

Vue.js

Good afternoon, dear colleagues.

I draw symbols dynamically on the SVG canvas.

I put the SVG file in the assets folder.

This is how it works:

<use xlink:href="../assets/test.svg#block1"/> // <- OK

And so the symbol is not displayed:

<use :href="'../assets/test.svg#block1'"/> // <- NOK
<use :xlink:href="'../assets/test.svg#block1'"/> // <- NOK
<use v-bind:xlink:href="'../assets/test.svg#block1'"/> // <- NOK
<use v-bind="{ 'xlink:href': '../assets/test.svg#block1' }"/> // <- NOK

If you look at the markup in the browser, in the first case the path to the file is used, after the webpack assembler, and in other cases exactly the path that is specified (non-existent)

Answer 1

require('path-to-asset')