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

【问题标题】：Images in Vue component when using Webpack Encore使用 Webpack Encore 时 Vue 组件中的图像
【发布时间】：2019-06-13 06:02:07
【问题描述】：

我正在构建一个 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 文件。

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

谢谢。

【问题讨论】：

【解决方案1】：

建议您阅读this post。我想你可以尝试像这样绑定你的 src 标签

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

如果仍然无法正常工作，请尝试包含 this vue image 库

【讨论】：

【解决方案2】：

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

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

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

谢谢

【讨论】：

【解决方案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">

【讨论】：