文件加载器不适用于 angular 中的动态 url

Question

file-loader 是否忽略动态 url？

// 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

Answer 1

你需要这样绑定

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

[] 与 {{ }} 不兼容。

Answer 2

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

Answer 3

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

Answer 4

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

ERROR in Cannot find module './{{assets}}flower.jpeg'

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

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

文件加载器不适用于 angular 中的动态 url

file-loader does not work with dynamic url in angular

dynamic-url

webpack

webpack-file-loader

angular