使用 React 将图像包含在 ASP.NET 核心应用程序中

Question

我在核心服务器上运行了一个反应应用程序 ASP.NET。

我正在尝试在我的一个反应页面上显示图像。 (图片位于："project_folder/ClientApp/src/images/progress_bar.gif"(

但这些都不起作用：

<img alt="loading..." src={'./progress_bar.gif'} />
<img alt="loading..." src={'images/progress_bar.gif'} />
<img alt="loading..." src={'./images/progress_bar.gif'} />
<img alt="loading..." src={'require(./images/progress_bar.gif')} />

我什至尝试禁用此功能：

app.UseStaticFiles();

还是没有运气。但是我可以通过 css 加载文件，没有问题，例如：

background-image: url("./images/login-left.jpg");

这会产生类似以下内容的SMTH：https://localhost:44329/static/media/login-left.270403e0.jpg

Answer 1

尝试以下选项。这是在 react 中导入图像的两种方法。原因 require 对您不起作用，因为您在引号中添加了 require，因此它是一个不应使用引号的字符串。确保您的路径正确。如果您的路径正确，那么以下选项将起作用

import progressBar from '../images/progress_bar.gif';
<img alt="loading..." src={progressBar} />

或

<img alt="loading..." src={require('../images/progress_bar.gif')} />

Answer 2

使用Webpack，使用图像和字体等静态资产的工作方式与 CSS 类似。

您可以直接在 TypeScript 模块中import文件。这会告诉 Webpack 将该文件包含在捆绑包中。与 CSS 导入不同，导入文件会为您提供一个字符串值。此值是可以在代码中引用的最终路径。

为了减少对服务器的请求数，导入小于 10,000 字节的图像将返回数据 URI 而不是路径。这适用于以下文件扩展名：bmp、gif、jpg、jpeg 和 png。由于 #1153，SVG 文件被排除在外。

在开始之前，您必须将每种类型的资产定义为有效的模块格式。否则，TypeScript 编译器将生成如下错误：

找不到模块"./徽标.png"。

要在 TypeScript 中导入资源文件，请在项目中创建一个新的类型定义文件，并将其命名为assets.d.ts。然后，为需要导入的每种类型的资产添加一行：

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

在本例中，我们添加了多个图像文件扩展名作为有效的模块格式。现在，编译器已配置完毕，下面是导入映像文件的示例：

import React from 'react';
import logo from './logo.svg'; // Tell Webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png
function Header() {
// Import result is the URL of your image
return <img src={logo} alt="Logo" />;
}
export default Header;

添加图像、字体和文件的完整参考。