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

【问题标题】：how to make local images working in webpack如何使本地图像在 webpack 中工作
【发布时间】：2018-03-31 16:27:49
【问题描述】：

我创建了一个包含一些 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>

但这显示404http错误代码

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 在这种情况下没有解决图片网址。

【问题讨论】：

localhost:3000/assets/images/img1.png 因为您的图像被放置在 assets 文件夹中
检查localhost:3000/webpack-dev-server，您将看到所有可用的网址

标签： angular webpack webpack-dev-server

【解决方案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的完整详情

【讨论】：