用Webpack 5在React和TypeScript中使用图像

在上一篇文章中，我们为我们的React和TypeScript应用程序的Webpack配置添加了CSS。在这篇文章中，我们将扩展这个Webpack配置，以便在应用程序中使用图像。

在应用中引用图片

让我们试着在一个组件中引用一个图片，如下所示：

const Content = () => (
  <div>
    <img src="./car.jpg" className={content.car} />
  </div>
);

如果我们在开发模式下运行应用程序 (npm start)，我们会发现没有找到图片。

目前，当代码被捆绑时，Webpack并没有移动或对图片做任何处理。

让我们试着导入图片。也许，Webpack会意识到这个图片并对其进行处理？

import car from "./car.jpg";
...
const Content = () => (
  <div>
    <img src={car} className={content.car} />
  </div>
);

我们得到一个TypeScript错误：

在上一篇文章中，我们在css文件上也遇到了类似的错误。为了解决这个错误，我们可以将以下内容添加到src 文件夹中一个名为custom.d.ts 的文件中：

declare module "*.jpg";
declare module "*.png";
declare module "*.jpeg";
declare module "*.gif";

TypeScript现在会对一系列的图片文件感到满意。然而，Webpack在处理我们的汽车图片时仍然很困难：

配置Webpack来处理图片

我们可以告诉Webpack使用其新的（在v5中）内置资产模块来处理图片

const config: Configuration = {
  ...
  module: {
    rules: [
      ...,
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        type: "asset/resource",
      },
    ],
  },
  ...
};

我们为生产型Webpack配置以及开发型Webpack添加上述规则。

在开发模式下（npm start ），应用程序现在成功地渲染了图像：

注意到Webpack在捆绑过程中给了图片一个随机的名字。这意味着该文件名不会与其他组件中的图像文件发生冲突。

在生产构建中 (npm run build)，我们看到图像被移到了build 文件夹中，名称也是随机的，并且在 JavaScript 中被相应地引用了：

处理CSS中的图像引用

我们可能想在CSS中引用图片。让我们检查一下这个工作是否正常。

我们将对Content 组件中的容器div应用一些CSS：

const Content = () => (
  <div className={content.container}>    <img src={car} className={content.car} />
  </div>
);

这个CSS将包含一个背景图片：

.container {
  background-image: url("./background.jpg");
  width: 400px;
  height: 300px;
  background-size: cover;
}

在开发模式下，背景处理得很好：

在生产模式下，背景也被很好地处理了：

很好！😊

就这样了!我们的React和TypeScript项目现在已经设置好了，可以使用图片：

这段代码可以在GitHub上找到：github.com/carlrip/rea…