Как правильно обращаться к статическому контенту в VUE2?

Question

[meridbt]

Добрый день, уважаемые коллеги.

Вывожу динамически символы на SVG холсте.

SVG файл кладу в папку assets.

Так работает:

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

А так символ не отображается:

<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

Если смотреть в браузере разметку, в первом случае используется путь к файлу, после сборщика webpack, а в остальных случаях именно тот путь, который указан (несуществующий)

Comments

[Aetae]

Проблему эту уже решили, а ответ почему так вот тут.

Answer 1

[Антон Антон]

require('path-to-asset')

Comments

[meridbt]

Так тоже пробовал, ошибка компиляции:
- Зависимость не найдена
или
- Модуль не найден
в зависимости от вида ссылки

[meridbt]

А, понял. Реквайрить нужно сам файл, а к нему уже дописывать id символа. Спасибо!

[joenerv]

meridbt, напишите, пожалуйста код, как это нужно сделать. Опыта не много, ни как не могу решить проблему с отображением спрайта svg

[meridbt]

joenerv,

<use :xlink:href="require(`@/assets/svg/filename.svg`) + '#sprite_name'"/>