文件加载器不适用于角度的动态 url答案

【问题标题】：file-loader does not work with dynamic url in angular文件加载器不适用于角度的动态 url
【发布时间】：2021-02-08 06:21:19
【问题描述】：

file-loader 会忽略动态网址吗？

// app.component.html
<img src="../assets/flower.jpeg" alt="Flower" width="100px">
<img src="{{assets}}flower.jpeg" alt="Flower" width="100px">

// app.component.ts
export class AppComponent {
  assets = '../assets/';
}

如您所见，我在 html 中有 2 张图片。第一个图像按预期显示，但第二个图像不起作用。

第一张图片生成，html中的图片url也发生了变化，而第二张图片的url没有经过哈希处理。

//eg:
<img src="./assets/b16683a9edb6ebf57d144f8b86cb163e.jpeg" alt="Flower" width="100px">
<img src="../assets/flower.jpeg" alt="Flower" width="100px">

这里是git repo 重现问题，运行npm i && npm start

【问题讨论】：

标签： angular webpack webpack-file-loader dynamic-url

【解决方案1】：

在您的特定情况下 - 是的，您的路径只是被忽略为不正确的路径。但是，如果您将其更改为 ./{{assets}}flower.jpeg（仅作为示例），您将收到错误

找不到模块'./{{assets}}flower.jpeg'中的错误

为什么会这样？ {{assets}} 是一个 Angular 绑定，确切的值只有在应用程序运行期间才会知道，而不是在构建过程中。因此，在构建过程中可以处理此路径的唯一方法就像它一样，因此，file-loaded 在此错误路径上找不到任何文件并给您一个错误。

我希望我已经非常清楚地解释了这个问题。但是，如果您不清楚某些细节，请随时在 cmets 中提出更多问题。

【讨论】：

所以我认为在我的情况下没有使用file-loader，我应该使用copy-webpack-plugin 来简单地将我的资产复制到输出目录并引用该路径。也没有散列资产路径/名称的机会？
有一些选项可以将哈希添加到文件名，但是，（据我所知）在这种情况下，无法将此哈希传递到您的代码中，以便应用程序知道新文件名

【解决方案2】：

我做了这个例子，它有效第一个是带有代码的html html 第二个是 .ts 我在名为 path 的 ts 中编写了一个变量，我将图像的 url 放在其中，然后我在 html 的属性 src 中使用绑定并发送变量路径。因此，当我单击名为“更改”的按钮时，图像会动态变化

【讨论】：

您尝试使用 CDN 图像，尝试使用本地图像。

【解决方案3】：

这样做， <img [src]="assets+'flower.jpeg'" alt="Flower" width="100px"> 更改资产路径如下 assets = 'assets/';

【讨论】：

您是否也更改了资产文件夹的路径？
是的！我更改了路径，实际上我正在使用文件加载器对图像名称进行哈希处理。如果我在src 本身中给出路径，这可行，但是当我使用与动态相同的路径时，它不起作用。我认为file-loader 只是忽略它，因为file-loader 既没有在assets 中生成带有散列的图像，也没有在图像src 中更改路径

【解决方案4】：

你需要这样绑定

<img src='{{ "assets/images/" + wonder.id + ".jpg" }}' />

[] 与{{ }} 不兼容。

【讨论】：