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

Question

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

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

我的 vue 组件是这样的：

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

我正在为图像使用版本控制，所以 logo.png 类似于徽标。39rut849hf.png 在构建文件夹中。清单文件在那里，其中包含带有正确地图的图像。

但是当组件呈现时它不指向版本化文件而是指向构建文件夹中不存在的 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 动态解析。

谢谢

Answer 3

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

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

然后像这样简单地导入图像

<img alt="logo" width="240" height="60" src="@images/logo.png">

Images in Vue component when using Webpack Encore