如何设置 React (create-react-app) 以显示图像答案

【问题标题】：How do I set React (create-react-app) to display image如何设置 React (create-react-app) 以显示图像
【发布时间】：2022-01-22 23:26:35
【问题描述】：

我有 create-react-app 应用程序，但无法显示图像。在我的代码中

<img src="/files/2k28WHrMCJu9jSEEss0Y9sKV7Oqf4b/0/120" alt="" />

使用 .htaccess

SetEnvIf Authorization .+ HTTP_AUTHORIZATION=$0
Options +FollowSymLinks -MultiViews

RewriteEngine On
RewriteBase /

RewriteRule ^files/(.*)$ /files/files.php?url=$1 [L,QSA]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^ index.html [QSA,L]

它应该转移到

<img src="/files/files.php?url=2k28WHrMCJu9jSEEss0Y9sKV7Oqf4b/0/120" alt="" />

文件夹结构app是：

|- build
|- files
|    |- files.php 
|- public
|    |- .htaccess
|    |- api
|    |- ...
|- src
|    |- folders with all pages, components, ...
|- storage
|    |- all images

PHP 代码 (files.php) 返回

header('Last-Modified: '. gmdate('D, d M Y H:i:s', time()) .' GMT');
header("Cache-Control: must-revalidate");
header('Expires:'. gmdate('D, d M Y H:i:s', time() + $expiry) .' GMT');
header('ETag: '. $etag);

header("Content-Type: image/jpeg");
header("Content-Length: ". filesize($file));
readfile($file);

如果我以构建模式（从构建目录）运行应用程序，一切都会完美运行。它在开发环境中不起作用。它在构建模式下而不是在开发模式下工作的原因是什么。原因是目录结构还是代理或其他？

问题是为什么它在构建应用程序中有效而在开发中无效。如果我使用直接 URL 将照片打开到浏览器 http://buil-app/files/2k28WHrMCJu9jSEEss0Y9sKV7Oqf4b/0/120 在构建应用程序中，将显示照片。使用开发模式 http://localhost:3000/files/2k28WHrMCJu9jSEEb7/O/120 显示的不是照片，而是应用程序。重写在 .htaccess 中不起作用或没有找到路径？

【问题讨论】：

标签： reactjs image url proxy cra

【解决方案1】：

在您的 react 应用中，将图像放在 public/static/images 下，并像这样处理它们：

<img src="/static/test.jpg" alt="test" />

【讨论】：