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

如何解决文件加载器不适用于 angular 中的动态 url

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/';
}

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

生成第一张图片，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

解决方法

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

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

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

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

,

你需要这样绑定

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

[] 与 {{ }} 不兼容。

,

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

,

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