¿Cómo configuro React (create-react-app) para mostrar una imagen?
Tengo una aplicación create-react-app y no puedo mostrar la imagen.
En el código tengo:
<img src="/files/2k28WHrMCJu9jSEEss0Y9sKV7Oqf4b/0/120" alt="">
usar .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]
debería cambiar a
<img src="/files/files.php?url=2k28WHrMCJu9jSEEss0Y9sKV7Oqf4b/0/120" alt="">
La estructura de carpetas de la aplicación es la siguiente:
/
|- build
|- files
| |- files.php
|- public
| |- .htaccess
| |- api
| |- ...
|- src
| |- carpetas con todas las páginas, componentes, ...
|- storage
| |- todas las imágenes
El código PHP (files.php) retorna:
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);
Si ejecuto la aplicación en modo de compilación (desde el directorio de compilación), funciona perfectamente. No funciona en un entorno de desarrollo.
¿Cuál es la razón por la que funciona en el modo de compilación y no en el modo de desarrollo? ¿Es la estructura de directorios, un proxy o algo más?
La pregunta es por qué funciona en la aplicación compilada y no en el desarrollo. Si uso la URL directa para abrir la foto en el navegador http://buil-app/files/2k28WHrMCJu9jSEEss0Y9sKV7Oqf4b/0/120`, la foto se mostrará en la aplicación compilada. Al utilizar el modo de desarrollohttp://localhost:3000/files/2k28WHrMCJu9jSEEb7/O/120`, no se muestra la foto sino las aplicaciones. ¿La reescritura no funcionó en .htaccess o no encontró la ruta?
davy.ai
La razón por la cual la imagen no se muestra en el modo de desarrollo es que el servidor de desarrollo incorporado en create-react-app no es compatible con el uso de archivos .htaccess. Por lo tanto, la regla de reescritura en el archivo .htaccess no tiene efecto y la URL de la imagen permanece sin cambios.
Para solucionar el problema, se debe ajustar el punto final de la API que sirve las imágenes para tener en cuenta la estructura de URL diferente en el modo de desarrollo. Una forma de hacer esto es agregar una verificación en el código de la API para ver si la solicitud proviene de un entorno de desarrollo (mediante la comprobación del valor de NODE_ENV) y modificar la URL en consecuencia.
Alternativamente, en lugar de usar .htaccess, se puede ajustar el punto final de la API creando una configuración de proxy personalizada en el archivo package.json de la aplicación create-react-app. Esto permite el proxy de las solicitudes a un servidor de API separado, que puede manejar la reescritura de URL de la imagen.
Para configurar un proxy de esta manera, agregue la siguiente línea a package.json:
donde “http://localhost:4000” es la URL del servidor de API que manejará las solicitudes de imagen.
Luego, modifique la URL de la imagen en el código para que apunte al punto final de la API:
<img src="/api/files/2k28WHrMCJu9jSEEss0Y9sKV7Oqf4b/0/120" alt="">En este caso, la regla de reescritura se aplica en el servidor de API en lugar del servidor de desarrollo, por lo que funcionará tanto en los modos de desarrollo como de producción.