0
2.3K
VistasCargar imágenes locales en React.js
Instalé React usando create-react-app . Se instaló bien, pero estoy tratando de cargar una imagen en uno de mis componentes ( Header.js , ruta del archivo: src/components/common/Header.js ) pero no se está cargando. Aquí está mi código:
import React from 'react'; export default () => { var logo1 = ( <img //src="https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-goose.jpg" src={'/src/images/logo.png'} alt="Canvas Logo" /> ); return ( <div id="header-wrap"> <div className="container clearfix"> <div id="primary-menu-trigger"> <i className="icon-reorder"></i> </div> <div id="logo"> <a href="/" className="standard-logo" data-dark-logo='/images/logo-dark.png'>{logo1}</a> <a href="/" className="retina-logo" data-dark-logo='/images/logo-dark@2x.png'> <img src='/var/www/html/react-demo/src/images/logo@2x.png' alt="Canvas Logo" /> </a> </div> </div> </div> ); } Si escribo la ruta de la imagen como src={require('./src/images/logo.png')} en mi variable logo1 , da el error:
No se pudo compilar.
Error en ./src/Components/common/Header.js
Módulo no encontrado: ./src/images/logo.png en /var/www/html/wistful/src/Components/common
Por favor, ayúdame a resolver esto. Déjame saber lo que estoy haciendo mal aquí.
3 Respuestas
Responde la pregunta0
Si tiene preguntas sobre cómo crear la React App , le recomiendo que lea su Guía del usuario .
Responde a esta y muchas otras preguntas que pueda tener.
En concreto, para incluir una imagen local tienes dos opciones:
// Assuming logo.png is in the same folder as JS file import logo from './logo.png'; // ...later <img src={logo} alt="logo" />
Este enfoque es excelente porque todos los activos son manejados por el sistema de compilación y obtendrán nombres de archivo con hash en la compilación de producción. También obtendrá un error si el archivo se mueve o elimina.
La desventaja es que puede volverse engorroso si tiene cientos de imágenes porque no puede tener rutas de importación arbitrarias.
// Assuming logo.png is in public/ folder of your project <img src={process.env.PUBLIC_URL + '/logo.png'} alt="logo" />
Este enfoque generalmente no se recomienda, pero es excelente si tiene cientos de imágenes e importarlas una por una es demasiado complicado. La desventaja es que debe pensar en la prevención de caché y tener cuidado con los archivos movidos o eliminados.
¡Espero que esto ayude!
0
Si desea cargar la imagen con una local relative URL como lo está haciendo. El proyecto React tiene una carpeta public predeterminada. Debes poner tu carpeta de images dentro. Funcionará.
0
En React o cualquier módulo de Javascript que use Webpack internamente, si el valor del atributo src de img se proporciona como una ruta en formato de cadena como se indica a continuación
eg <img src={'/src/images/logo.png'} /> or <img src='/src/images/logo.png' />luego, durante la construcción, la página HTML final construida contiene src='/src/images/logo.png'. Esta ruta no se lee durante el tiempo de compilación, pero se lee durante la representación en el navegador. En el momento de la renderización, si el logo.png no se encuentra en el directorio /src/images, la imagen no se renderizará. Si abre la consola en el navegador, puede ver el error 404 para la imagen. Creo que querías usar el directorio ./src en lugar del directorio /src. En ese caso, el directorio de desarrollo ./src no está disponible para el navegador. Cuando la página se carga en el navegador, solo los archivos en el directorio 'público' están disponibles para el navegador. Por lo tanto, se supone que la ruta relativa ./src es el directorio public/src y si logo.png no se encuentra en el directorio public/src/images/, no representará la imagen.
Entonces, la solución para este problema es colocar su imagen en el directorio público y hacer referencia a la ruta relativa del directorio público o usar import o require palabras clave en React o cualquier módulo de Javascript para informar al Webpack que lea esta ruta durante la fase de compilación e incluir la imagen en la salida final de la compilación. Los detalles de ambos métodos han sido elaborados por Dan Abramov en su respuesta, consúltelos o use el enlace: https://create-react-app.dev/docs/adding-images-fonts-and-files/