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

我有一个在ASP.NET核心服务器上运行的react应用程序

我试图在我的一个页面上显示图像。 （图像位于：“项目文件夹/ClientApp/src/images/progress\u 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')} />

还是不走运。但我可以通过css加载文件，不会出现以下问题：

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

---

这会产生类似smth的：

https://localhost:44329/static/media/login-左.270403e0.jpg

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

 import progressBar from '../images/progress_bar.gif';

   <img alt="loading..." src={progressBar} />

从“../images/progress_bar.gif”导入progressBar；

或

---

对于Webpack，使用静态资源（如图像和字体）的工作原理与CSS类似

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

要减少对服务器的请求数，导入小于10000字节的图像将返回一个而不是路径。这适用于以下文件扩展名：bmp、gif、jpg、jpeg和png。SVG文件被排除在外，原因是

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

找不到模块'./logo.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;

从“React”导入React；
从“./logo.svg”；/”导入徽标告诉Webpack此JS文件使用此图像
console.log（徽标）；///logo.84287d09.png
函数头（）{
//导入结果是图像的URL
返回；
}
导出默认标题；

---

找不到模块的完整参考：无法解析“…\ClientApp\src\components”中的“/images/progress\u bar.gif”，您需要指定正确的路径。检查你的路径。你的路径不正确，这就是为什么你会出现这个错误。我一直缺少另一个点，正确的路径是“../images/progress\u bar.gif”很酷。很乐意帮忙：）

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;