使用 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 在构建文件夹中类似于 logo.39rut849hf.png。 清单文件中存在带有正确地图的图像。

但是，当组件呈现时，它并不指向版本化文件，而是指向构建文件夹中不存在的 logo.png 文件。

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

谢谢。

Answer 1

建议你阅读这篇文章 。 我想你可以尝试像这样绑定你的src标签

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

如果仍然无法正常工作，请尝试包含此vue图像库

Answer 2

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

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

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

谢谢

Answer 3

我建议在你的 webpack 配置中添加一个别名

const path = require('path');
Encore
  .addAliases({
    '@images': path.resolve(__dirname, 'assets/images'),
  })
// ...