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

Question

I have create-react-app application and I am unable to display the image. In a code I have

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

use .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]

it should transfer to

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

folder structure app is:

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

PHP code (files.php) returns

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);

If I run the application in build mode (from the build directory), everything works perfectly. It doesn't work in a development environment. What is the reason that it works in build mode and not in development mode. Is the reason a directory structure or a proxy or something else?

Answer 1

In your react app put the images under public/static/images and address them like this:

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