React no cargará imágenes locales

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');
});

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.

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

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

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.

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")} />

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.

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" />

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

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

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

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

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.

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.

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

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

import image from '../image.png'

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