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