Question

我创建了一个包含一些UI组件的库。有一个组件采用图像源来显示图像。

现在我已经创建了一个项目，我已经使用了这个库。该项目使用webpack和webpack-dev-server来提供文件。对于图片支持，我在 webpack-config.js

中添加了这样的内容

{ test: /\.(ttf|eot|svg|png)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }

以下是库中采用图像源的组件

import { Component, Input } from "@angular/core";

@Component({
    selector: "my-compo",
    templateUrl: "my-compo.html"
})
export class MyCompo {
    @Input()
    imageSource: any;
}

以及该组件的标记

<div style="margin:5px">
    <img [src]="imageSource">
</div>

这就是我在项目中使用的方式

<my-compo [imageSource]="imageUrl"></my-compo>

imageUrl是

imageUrl: "../../assets/images/AssetPreview.png";

当组件在屏幕上呈现时

<div style="margin:5px"><img alt="Asset" src="../../images/img1.png"></div>

但这会显示404 http错误代码

http://localhost:3000/assets/images/img1.png

未找到。

我该如何解决这个问题？

更新

在项目方面，我也使用SVG图像的徽标。我提供的网址是

<img src="../../assets/images/logo.svg">

当我在浏览器中看到它时，它呈现为

<img src="d91e51aeba7c150154372f81062efb9a.svg">

但是在库组件的情况下，它正在渲染

<img alt="Asset" src="../../assets/images/AssetPreview.png">

我猜webpack-dev-server在这种情况下没有解决图片网址。

Answer 1

fil-loader模块更改文件的路径和名称。所以在我的情况下，由于图像src通过变量绑定，因此它没有得到解决。所以我必须为file-loader模块提供一些选项

{ test: /\.(ttf|eot|svg|jpe?g|png|gif)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader?name=[path][name].[ext]" }

我已指定文件的name 为您的文件配置自定义文件名模板

以下是file-loader

的完整详情

如何使本地图像在webpack中工作

1 个答案: