У меня есть проект на Vue (сделанный с помощью vui-cli 3). В этом проекте у меня есть языковой файл (пары ключ: значение), в котором одно из значений представляет собой строку html, содержащую img ("my.key": "look at this <img src="@/assets/images/myImage.svg" />"). В шаблоне у меня есть что-то вроде <div v-html="$t('my.key')" />
Если я помещу img в каталог public и назову его как /myImage.svg, он будет работать в разработке, но не будет работать в производстве (вероятно, потому что наши маршруты сложны).
Я предпочитаю объединять изображение (@/assets/images/myImage.svg), и я попытался потребовать его (require('@/assets/images/myImage.svg')), чтобы убедиться, что он связан, но это не сработало.
Что мне нужно делать?
РЕДАКТИРОВАТЬ
В конце концов я импортировал изображение (import myImg from '@/assets/images/myImage.svg'), чтобы убедиться, что оно объединено, и использовал заполнитель вместо sr c в языковом файле ( "my.key": "look at this <img src=\"{myImg}\""). Этот заполнитель заменяется в шаблоне URL-адресом импортированного изображения (<div v-html="$t('my.key', { myImg })" />)
Это не очень динамично c, поскольку требует, чтобы я заранее знал, какие изображения будут использоваться, но мне нужно было быстро исправить.
Я не уверен, есть ли лучший способ сделать то, что я хочу ...