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

Я создаю веб-приложение 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, которого нет в папке сборки.

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

Спасибо.


webpack javascript vue.js webpack-encore
person Jean Paul Rumeau    schedule 13.06.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

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

If is still not working try to include this vue image library

person Sabee    schedule 13.06.2019

arrow_upward
0
arrow_downward

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

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

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

Спасибо

person Jean Paul Rumeau    schedule 13.06.2019