使用Webpack转换图像的动态路径

Question

我正在http://localhost:5000/api/laptops的json列表中创建我的项目的动态列表。我想通过 laptop.IconFileName 将照片加载到我在组件中的路径。

<div class="col-lg-3 item-menu" *ngFor="let laptop of laptops">
                  <span class="helper"></span>


                  <img src="'../../content/Laptop/' + laptop.iconFileName" />
                  <p class="name-menu">
                      {{laptop.name}}

                  </p>
              </div>

当我像上面那样动态地执行此操作时，我在网络部分出错：

GET http://localhost:5000/content/Laptop/2_apple.jpg 404 (Not Found)

我的路径如下：

当我手动加载时，我的意思是：'../../content/Laptop/1_laptop.jpg'在它运作的组件中，我正在走这条道路：

我正在使用Angular2 SPA和.NET作为后端。我的应用正在使用webpack

Answer 1

正如您所注意到的，webpack会在构建期间解析您的文件。它不支持在运行时动态解析

您可以做的一件事是手动或在构建过程中将文件通过copy-webpack-plugin'放入您的服务器目录并手动构建网址。

或者需要所有文件并将它们放在一个数组中，并使用一个以动态部分为关键字的对象和文件的路径作为值。

const computer1 = require(...);
const icons = {
  computer1,
  ...
};

<img src={icons[laptop.iconFilename]} />