使用Webpack Encore时Vue组件中的图像

Question

我正在构建一个Symfony Web应用程序，并使用Webpack Encore来为前端编译VUE组件。

我有一个包含图像标签的VUE组件。问题是webpack无法正确编译映像src。

我的Vue组件类似于：

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

我正在使用图像的版本控制，因此logo.png类似于build文件夹上的logo.39rut849hf.png。清单文件中有一个包含正确映射的图像。

但是当组件渲染时，它并不指向版本文件，而是指向build文件夹中不存在的logo.png文件。

如何将图像插入组件并保留版本控制功能？

谢谢。

Answer 1

建议您阅读this post。我认为您可以尝试像这样

绑定src标签

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

如果仍然无法正常运行，请尝试添加this vue image库

Answer 2

最后对我有用的是直接在src上要求图像：

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

请注意，该路径相对于.vue组件，并且指向src映像，而不是构建映像，因为该路径应该由webpack动态解析。

谢谢