React no cargará imágenes locales

122

Estoy creando una pequeña aplicación de reacción y mis imágenes locales no se cargan. Imágenes comoplacehold.it/200x200 cargas. Pensé que tal vez podría ser algo con el servidor.

Aquí está mi App.js

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div className="home-container">
                <div className="home-content">
                    <div className="home-text">
                        <h1>foo</h1>
                    </div>
                    <div className="home-arrow">
                        <p className="arrow-text">
                            Vzdělání
                        </p>
                        <img src={"/images/resto.png"} />
                    </div>
                </div>
            </div>
        );
    }
}

export default App;

index.js:

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Router, Route, Link } from 'react-router';
import { createHistory } from 'history';
import App from './components/app';

let history = createHistory();

render(
    <Router history={history} >
        <Route path="/" component={App} >
            <Route path="vzdelani" component="" />
            <Route path="znalosti" component="" />
            <Route path="prace" component="" />
            <Route path="kontakt" component="" />
        </Route>
        <Route path="*" component="" />
    </Router>,
    document.getElementById('app')
);

y server.js:

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev');

var app = express();
var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));
});

app.listen(3000, 'localhost', function(err) {
  if (err) {
    console.log(err);
    return;
  }

  console.log('Listening at http://localhost:3000');
});
Petrba
fuente
4
Esto generalmente significa que su servidor web local no está sirviendo las imágenes o que la URL que especificó es incorrecta. Abra la consola de su navegador y verifique si recibe algún error, como 404 no encontrado.
Mario Tacke
5
Amigos! solo usa require(). por ejemplo, src = {require ("ruta de la imagen")}
Neeraj Sewani

Respuestas:

268

Al usar Webpack, necesita requireimá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 hacerlo <img src={"/images/resto.png"} />, debe <img src={require('/images/image-name.png')} />reemplazar image-name.png con el nombre de imagen correcto para cada una de ellas. De esa manera, Webpack puede procesar y reemplazar la fuente img.

Thomas
fuente
1
Pero, ¿cómo importar? Browserify? ¿Si es así, entonces cómo? Lo he intentado import {require} from 'browserify'. Pero no funciona.
Shubham Kushwah
1
@ShubhamKushwah No debería tener que importar require. Se proporciona como parte de commonjs. Consulte stackoverflow.com/a/33251937/4103908 y viget.com/articles/gulp-browserify-starter-faq para obtener más detalles que podrían ayudarlo a usar require y browserify usando Gulp.
Thomas
@Thomas El problema es con las imágenes internas y externas, no se cargan cuando se carga la página por primera vez, pero si la actualizo, se cargarán. Entonces, ¿cómo debo resolver esto?
Shubham Kushwah
6
Conseguir un error: Module not found: Error: Can't resolve 'MyPNG.png' in 'C:...\app\components\images'. ¡La ruta al archivo se ve bien !.
reubenjohn
2
src = {require ('./ reactLogo.svg')} comience su ruta con "./" para el directorio actual para evitar errores.
Queso
53

Empecé 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 <img src={logo} alt="Logo" />;
}

export default Header;

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

... Puede importar un archivo directamente en un módulo 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 da un valor de cadena. Este valor es la ruta final a la que puede hacer referencia en su código, por ejemplo, como el atributo src 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 de 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 ...

Hawkeye Parker
fuente
Además, también tienes que estar exportando las imágenes desde algún lugar para poder importarlas en cualquier lugar y no solo desde dentro del mismo directorio, que es lo que sería el caso si no se estuvieran exportando. Tendrían que residir en el mismo directorio que el componente al que se estaban importando. Notará que con cualquier aplicación React nueva creada con CRA, por ejemplo, el archivo logo.svg reside en el mismo directorio que App.js, donde se importa. Escribí un artículo sobre la importación de imágenes en React aquí: blog.hellojs.org/importing-images-in-react-c76f0dfcb552
Maria Campbell
Para continuar con el comentario anterior, si usa el cargador de URL del paquete web como fandro muestra arriba, sus archivos que coinciden con las extensiones de prueba en el paquete web se exportan automáticamente y están disponibles para importar el guardado que Hawkeye Parker ha mostrado arriba.
dave4jr
Sé que este es un tema muy antiguo, pero aún así; ¿Cómo hiciste que funcionara? En mi caso, el programa está tratando de "leer la imagen" ... resultando en un error terrible: Unexpected character '�' (1:0) > 1 | �PNG | ^ 2 | 3 | 4 | IHDR��r~ipHYs���o�d��IDATx^�}���Ü�d7�w¿½ï¿½ ��JzH!�K�ï...
V. Courtois
@ V.Courtois lo siento, no he trabajado con esto desde entonces, y no recuerdo más detalles en este momento :(
Hawkeye Parker
Tuve que agregar mis imágenes a la carpeta pública en el proyecto Create-React-App.
pixel 67
29

Otra forma de hacerlo:

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 su configuración de Webpack:

module: {
    loaders: [
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
    ]
  }

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

Necesita instalar ambos módulos:url-loader yfile-loader

Finalmente, puedes hacer:

<img src={require('./my-path/images/my-image.png')}/>

Puede investigar estos cargadores más a fondo aquí:

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

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

fandro
fuente
1
Ojalá ayude a otros. Tuve que hacer esto también; Instale url-loader. npm install --save-dev url-loader
LUser
1
Estuve luchando con esto anoche, y esta publicación estaba realmente en mi pantalla esta mañana :) Si ve algo como Module build failed: SyntaxError: c:/contrivedpath/images/profile.jpg: Unexpected character '�' (1:0), todo lo que necesita hacer es agregar esta configuración del cargador de url anterior a la configuración de su paquete web, npm install url-loaderY file-loaderlo hará ser funcional. Probé para asegurarme, y el cargador de archivos es necesario.
agm1984
1
@ agm1984 Seguí los pasos anteriores y todavía recibo el ERROR in ./src/images/imagename.png Module parse failed: Unexpected character '�' (1:0)mensaje. ¿Algunas ideas?
David
fue realmente útil, pero no puedo entender por qué <img src = "images / myimage.png" /> no funciona. ¿Podría explicar por favor?
Marcos
Hizo todo lo que dijiste pero sin dados. Webpack se compila sin quejarse, puedo ver que mi imagen PNG se ha movido al directorio de salida, pero la imagen no se carga en la página. Cuando inspecciono el código, solo dice src=[Object module]y cuando coloco el mouse sobre el mouse dice 'no se pudo cargar la imagen'
JSStuball
4

En realidad me gustaría comentar, pero aún no estoy autorizado. Es por eso que pretende ser la próxima respuesta mientras no lo es.

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 <img src={logo} alt="Logo" />;

Me gustaría seguir ese camino. Eso funciona sin problemas cuando se tiene una imagen que se puede insertar fácilmente. En mi caso eso es un poco más complejo: tengo que mapear varias imágenes. Hasta ahora, la única forma viable de hacer esto que encontré es la siguiente

import upperBody from './upperBody.png';
import lowerBody from './lowerBody.png';
import aesthetics from './aesthetics.png';

let obj={upperBody:upperBody, lowerBody:lowerBody, aesthetics:aesthetics, agility:agility, endurance:endurance}

{Object.keys(skills).map((skill) => {
 return ( <img className = 'icon-size' src={obj[skill]}/> 

Entonces, mi pregunta es si hay formas más simples de procesar estas imágenes. No hace falta decir que, en un caso más general, la cantidad de archivos que deben importarse literalmente podría ser enorme y la cantidad de claves en el objeto también. (El objeto en ese código está involucrado claramente para referirse por nombres, sus claves) En mi caso, los procedimientos relacionados con los requisitos no han funcionado: los cargadores generaron errores de tipo extraño durante la instalación y no mostraron ninguna marca de funcionamiento; y requerir por sí solo no ha funcionado tampoco.

Kiszuriwalilibori
fuente
2

Solo quería dejar lo siguiente que mejora la respuesta aceptada anterior.

Además de la respuesta aceptada, puede hacer su propia vida un poco más fácil especificando un alias ruta en Webpack, para que no tenga que preocuparse de dónde se encuentra la imagen en relación con el archivo en el que se encuentra actualmente. Consulte el ejemplo a continuación :

Archivo webpack:

module.exports = {
  resolve: {
    modules: ['node_modules'],
    alias: {
      public: path.join(__dirname, './public')
    }
  },
}

Utilizar:

<img src={require("public/img/resto.ong")} />
Adamj
fuente
2

A mí también me gustaría agregar a las respuestas de @Hawkeye Parker y @Kiszuriwalilibori:

Como se señaló en los documentos aquí , generalmente es mejor importar las imágenes según sea necesario.

Sin embargo, necesitaba que se cargaran dinámicamente muchos archivos, lo que me llevó a poner las imágenes en la carpeta pública ( también se indica en el README ), debido a esta recomendación a continuación de la documentación:

Normalmente recomendamos importar hojas de estilo, imágenes y fuentes desde JavaScript. La carpeta pública es útil como solución para varios casos menos comunes:

  • Necesita un archivo con un nombre específico en el resultado de la compilación, como manifest.webmanifest.
  • Tiene miles de imágenes y necesita hacer referencia dinámicamente a sus rutas.
  • Desea incluir un pequeño script como pace.js fuera del código incluido.
  • Algunas bibliotecas pueden ser incompatibles con Webpack y no tiene otra opción que incluirlas como una etiqueta.

¡Espero que ayude a alguien más! Déjame un comentario si necesito aclarar algo de eso.

pantalones-vancy
fuente
2

Estoy desarrollando un proyecto que usa SSR y ahora quiero compartir mi solución basada en algunas respuestas aquí.

Mi objetivo es precargar una imagen para mostrarla cuando la conexión a Internet está desconectada. (Puede que no sea la mejor práctica, pero como funciona para mí, está bien por ahora) FYI, también uso ReactHooks en este proyecto.

  useEffect(() => {
    // preload image for offline network
    const ErrorFailedImg = require('../../../../assets/images/error-review-failed.jpg');
    if (typeof window !== 'undefined') {
      new Image().src = ErrorFailedImg;
    }
  }, []);

Para usar la imagen, la escribo así

<img src="/assets/images/error-review-failed.jpg" />
Vinsensius Danny
fuente
1

Intente cambiar el código en server.js a -

app.use(require('webpack-dev-middleware')(compiler, {
      noInfo: true,
      publicPath: config.output.path
    }));
peligroso
fuente
1

A veces puede ingresar en lugar de en la ubicación de su imagen / src: intente

./assets/images/picture.jpg

en vez de

../assets/images/picture.jpg
Kean Amaral
fuente
1
src={"/images/resto.png"}

El uso del atributo src de esta manera significa que su imagen se cargará desde la ruta absoluta "/images/resto.png" para su sitio. El directorio de imágenes debe estar ubicado en la raíz de su sitio. Ejemplo: http://www.example.com/images/resto.png

zdrsoft
fuente
1

Esto es lo que funcionó para mí. Primero, entendamos el problema. No puede usar una variable como argumento para requerir. Webpack necesita saber qué archivos empaquetar en tiempo de compilación.

Cuando recibí el error, pensé que podría estar relacionado con el problema de la ruta como en absoluto frente a relativo. Así que pasé un valor codificado para requerir como a continuación: <img src = {require ("../ assets / images / photosnap.svg")} alt = "" />. Estaba funcionando bien. Pero en mi caso el valor es una variable proveniente de props. Intenté pasar una variable literal de cadena como sugirieron algunos. No funcionó. También traté de definir un método local usando el caso de cambio para los 10 valores (sabía que no era la mejor solución, pero solo quería que funcionara de alguna manera). Eso tampoco funcionó. Luego me di cuenta de que NO podemos pasar la variable al requisito.

Como solución temporal, modifiqué los datos en el archivo data.json para limitarlo solo al nombre de mi imagen. Este nombre de imagen que proviene de los accesorios como un literal de cadena. Lo concatené al valor codificado de forma rígida, así:

import React from "react";

function JobCard(props) {  

  const { logo } = props;
  
  return (
      <div className="jobCards">
          <img src={require(`../assets/images/${logo}`)} alt="" /> 
      </div>
    )
} 
  

El valor real contenido en el logotipo vendría del archivo data.json y se referiría a algún nombre de imagen como photosnap.svg.

Venky4c
fuente
0

La mejor forma de cargar imágenes locales en react es la siguiente

Por ejemplo, mantenga todas sus imágenes (o cualquier activo como videos, fuentes) en la carpeta pública como se muestra a continuación.

ingrese la descripción de la imagen aquí

Simplemente escriba <img src='/assets/images/Call.svg' />para acceder a la imagen Call.svg desde cualquiera de sus componentes de reacción

Nota: Mantener sus activos en la carpeta pública garantiza que pueda acceder a ellos desde cualquier lugar del proyecto, simplemente dando '/ path_to_image' y sin necesidad de ningún recorrido de ruta '../../' como este

mokesh moha
fuente
¿La imagen PNG no funciona en esto? Porque hice exactamente esto y no funcionó.
maverick
PNG también funcionará. ¿SVG funciona para usted? Revise la ortografía del nombre del archivo y asegúrese de que la ruta de la imagen sea correcta.
mokesh moha
1
disculpas por este error. Era nuevo en reaccionar y no sabía que el archivo de componentes debería comenzar con mayúscula. Después de eso funcionó.
Maverick
0

primero debe importar la imagen y luego usarla. Funcionó para mí.


import image from '../image.png'

const Header = () => {
   return (
     <img src={image} alt='image' />
   )
}

Omama Zainab
fuente