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

【问题标题】：Convert my dynamic path for images with Webpack使用 Webpack 转换图像的动态路径
【发布时间】：2018-08-14 19:31:58
【问题描述】：

我正在从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

【问题讨论】：

标签： html typescript webpack

【解决方案1】：

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

您可以做的一件事是手动或在构建期间通过“copy-webpack-plugin”将文件放入您的服务器目录并手动构建 url。

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

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

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

【讨论】：