文件加载器不适用于 angular 中的动态 url
file-loader does not work with dynamic url in angular
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
你需要这样绑定
<img src='{{ "assets/images/" + wonder.id + ".jpg" }}' />
[] 与 {{ }} 不兼容。
我做了这个例子并且它有效
第一个是带有代码的 html
html
第二个是
.ts
我在 ts 中写了一个名为 path 的变量，我将图像的 url 放在其中，然后在 html 的 属性 src 中使用绑定，然后发送变量路径。
因此，当我单击名为 'change' 的按钮时，图像会动态变化
这样做，
<img [src]="assets+'flower.jpeg'" alt="Flower" width="100px">
更改资产路径如下
assets = 'assets/';
在您的特定情况下 - 是的，您的路径被简单地忽略为不正确的路径。但是，如果您将其更改为 ./{{assets}}flower.jpeg（仅作为示例），您将收到错误消息
ERROR in Cannot find module './{{assets}}flower.jpeg'
为什么会这样？ {{assets}} 是一个 Angular 绑定，只有在应用 运行 期间而不是在构建过程中才能知道确切的值。因此，在构建过程中只能按原样处理此路径，因此，file-loaded 无法在此错误路径上找到任何文件并给您一个错误。
我希望我已经很清楚地解释了这个问题。但是，如果您不清楚某些细节，请随时在评论中提出更多问题。
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
你需要这样绑定
<img src='{{ "assets/images/" + wonder.id + ".jpg" }}' />
[] 与 {{ }} 不兼容。
我做了这个例子并且它有效 第一个是带有代码的 html html 第二个是 .ts 我在 ts 中写了一个名为 path 的变量，我将图像的 url 放在其中，然后在 html 的 属性 src 中使用绑定，然后发送变量路径。 因此，当我单击名为 'change' 的按钮时，图像会动态变化
这样做，
<img [src]="assets+'flower.jpeg'" alt="Flower" width="100px">
更改资产路径如下
assets = 'assets/';
在您的特定情况下 - 是的，您的路径被简单地忽略为不正确的路径。但是，如果您将其更改为 ./{{assets}}flower.jpeg（仅作为示例），您将收到错误消息
ERROR in Cannot find module './{{assets}}flower.jpeg'
为什么会这样？ {{assets}} 是一个 Angular 绑定，只有在应用 运行 期间而不是在构建过程中才能知道确切的值。因此，在构建过程中只能按原样处理此路径，因此，file-loaded 无法在此错误路径上找到任何文件并给您一个错误。
我希望我已经很清楚地解释了这个问题。但是，如果您不清楚某些细节，请随时在评论中提出更多问题。