在ASP.NET核心应用程序中包含图像和React
我有一个反应应用程序运行在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");这会产生类似于：https://localhost:44329/static/media/login-left.270403e0.jpg的气味
Stack Overflow用户
发布于 2019-02-09 21:50:52
对于Webpack，使用像图像和字体这样的静态资产的效果类似于CSS。
您可以将import 文件直接放在TypeScript模块中。这告诉Webpack将该文件包含在包中。与CSS导入不同，导入文件会为您提供一个字符串值。此值是您可以在代码中引用的最后一条路径。
为了减少对服务器的请求数量，导入小于10,000个字节的图像将返回一个数据URI而不是一个路径。这适用于以下文件扩展名: bmp、gif、jpg、jpeg和png。由于#1153，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;-- 添加图像、字体和文件的完整参考文献。
https://stackoverflow.com/questions/52728099
复制相似问题
腾讯云开发者
