Изображения в компоненте Vue при использовании Webpack Encore

Question

Я создаю веб-приложение Symfony и использую Webpack Encore для компиляции компонентов VUE для внешнего интерфейса.

У меня есть компонент VUE, который включает тег изображения. Проблема в том, что webpack неправильно компилирует образ src.

Мой компонент vue выглядит примерно так:

<template>
     <div class="demo-div">
         <img src="build/images/logo.png" />
     </div>
</template>

Я использую управление версиями для изображений, поэтому logo.png в папке сборки представляет собой что-то вроде logo.39rut849hf.png. Файл манифеста там, где в нем есть изображение с правильной картой.

Но когда компонент рендерится, он указывает не на версионный файл, а на файл logo.png, которого нет в папке сборки.

Как я могу вставить изображение в компонент и сохранить функцию управления версиями?

Спасибо.

Answer 1

Наконец, для меня сработало требование, чтобы изображение было прямо на src:

<img :src="require('../../../../images/bags.png')">

Обратите внимание, что путь относится к компоненту .vue и указывает на образ src, а не на образ сборки, поскольку это должно быть динамически разрешено с помощью веб-пакета.

Спасибо

Answer 2

Рекомендую вам прочитать этот пост .Я думаю, что вы можете попытаться связать свой тег src следующим образом

<template>
 <div class="demo-div">
     <img :src="'build/images/logo.png'" />
 </div>

Если все еще не работает, попробуйте включить это vue image library