Saltar al contenido

React no cargará imágenes locales

Posterior a consultar con expertos en el tema, programadores de deferentes ramas y maestros hemos dado con la solución al problema y la dejamos plasmada en este post.

Solución:

Al usar Webpack, necesita require imágenes para que Webpack las procese, lo que explicaría por qué las imágenes externas se cargan mientras que las internas no, por lo que en lugar de

necesitas usar reemplazando image-name.png con el nombre de imagen correcto para cada uno de ellos. De esa manera, Webpack puede procesar y reemplazar la fuente img.

Comencé a crear mi aplicación con create-react-app (consulte la pestaña “Crear una nueva aplicación”). El README.md que viene con él da este ejemplo:

import React from 'react';
import logo from './logo.png'; // 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 Logo;


export default Header;

Esto funcionó perfectamente para mí. Aquí hay un enlace al documento maestro para ese LÉAME, que explica (extracto):

… Puede importar un archivo directamente en un módulo de JavaScript. Esto le dice a Webpack que incluya ese archivo en el paquete. A diferencia de las importaciones de CSS, la importación de un archivo le brinda una string valor. Este valor es la ruta final a la que puede hacer referencia en su código, por ejemplo, como el src attribute de una imagen o el href de un enlace a un PDF.

Para reducir la cantidad de solicitudes al servidor, la importación de imágenes que tienen menos de 10,000 bytes devuelve un URI de datos en lugar de una ruta. Esto se aplica a las siguientes extensiones de archivo: bmp, gif, jpg, jpeg y png…

Otra forma de hacer:

Primero, instale estos módulos: url-loader, file-loader

Usando npm: npm install --save-dev url-loader file-loader

A continuación, agregue esto a la configuración de su paquete web:

module: 
    loaders: [
      jpg)$/, loader: 'url-loader?limit=8192' 
    ]
  

limit: Límite de bytes para archivos en línea como URL de datos

Necesitas instalar ambas cosas módulos: url-loader y file-loader

Finalmente, puedes hacer:


Puede investigar más sobre estos cargadores aquí:

cargador de URL: https://www.npmjs.com/package/url-loader

cargador de archivos: https://www.npmjs.com/package/file-loader

Comentarios y valoraciones de la guía

Tienes la opción de añadir valor a nuestra información aportando tu experiencia en las críticas.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *