React non caricherà le immagini locali

Sto creando una piccola app React e le mie immagini locali non verranno caricate. Immagini come placehold.it/200x200carichi. Ho pensato che forse potrebbe essere qualcosa con il server?

Ecco il mio 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')
);

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

Quando si utilizza Webpack è necessario disporre delle requireimmagini affinché Webpack le elabori, il che spiegherebbe perché le immagini esterne vengono caricate mentre quelle interne non lo fanno, quindi invece di <img src={"/images/resto.png"} />è necessario utilizzare la <img src={require('/images/image-name.png')} />sostituzione di nome-immagine.png con il nome immagine corretto per ciascuna di esse. In questo modo Webpack è in grado di elaborare e sostituire il sorgente img.

Ho iniziato a creare la mia app con create-react-app (vedi scheda "Crea una nuova app"). Il file README.md fornito con esso fornisce questo esempio:

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;

Ha funzionato perfettamente per me. Ecco un collegamento al documento principale per quel README , che spiega (estratto):

... Puoi importare un file direttamente in un modulo JavaScript. Questo dice a Webpack di includere quel file nel bundle. A differenza delle importazioni CSS, l'importazione di un file fornisce un valore stringa. Questo valore è il percorso finale a cui puoi fare riferimento nel tuo codice, ad esempio come attributo src di un'immagine o href di un collegamento a un PDF.

Per ridurre il numero di richieste al server, l'importazione di immagini inferiori a 10.000 byte restituisce un URI di dati anziché un percorso. Questo vale per le seguenti estensioni di file: bmp, gif, jpg, jpeg e png ...

Un altro modo per farlo:

In primo luogo, installare questi moduli: url-loader,file-loader

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

Quindi, aggiungi questo alla tua configurazione Webpack:

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

limit: Limite di byte ai file in linea come URL dati

È necessario installare entrambi i moduli: url-loaderefile-loader

Infine puoi fare:

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

Puoi esaminare ulteriormente questi caricatori qui:

url-loader: https://www.npmjs.com/package/url-loader

caricatore di file: https://www.npmjs.com/package/file-loader

In realtà vorrei commentare, ma non sono ancora autorizzato. Ecco perché quella finge di essere la prossima risposta mentre non lo è.

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

Vorrei continuare quel percorso. Funziona senza problemi quando si ha un'immagine che si può semplicemente inserire. Nel mio caso è leggermente più complesso: devo mappare diverse immagini. Finora l'unico modo praticabile per farlo che ho trovato è il seguente

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]}/> 

Quindi, la mia domanda è se ci sono modi più semplici per elaborare queste immagini? Inutile dire che in un caso più generale il numero di file che devono essere letteralmente importati potrebbe essere enorme e anche il numero di chiavi in ​​oggetto. (L'oggetto in quel codice è chiaramente coinvolto per fare riferimento tramite nomi -le sue chiavi) Nel mio caso le procedure relative ai requisiti non hanno funzionato - i caricatori hanno generato errori di tipo strano durante l'installazione e non hanno mostrato segni di funzionamento; e require da solo non ha funzionato neanche.

Volevo solo lasciare quanto segue che migliora la risposta accettata sopra.

Oltre alla risposta accettata, puoi semplificarti un po 'la vita specificando un aliaspercorso in Webpack, quindi non devi preoccuparti di dove si trova l'immagine rispetto al file in cui ti trovi attualmente. Vedi l'esempio sotto :

File webpack:

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

Uso:

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

Anch'io vorrei aggiungere alle risposte di @Hawkeye Parker e @Kiszuriwalilibori:

Come è stato notato dai documenti qui , in genere è meglio importare le immagini secondo necessità.

Tuttavia, avevo bisogno di molti file da caricare dinamicamente, il che mi ha portato a mettere le immagini nella cartella pubblica ( indicata anche nel README ), a causa di questa raccomandazione di seguito dalla documentazione:

Normalmente consigliamo di importare fogli di stile, immagini e caratteri da JavaScript. La cartella pubblica è utile come soluzione alternativa per una serie di casi meno comuni:

• È necessario un file con un nome specifico nell'output della build, come manifest.webmanifest.
• Hai migliaia di immagini e devi fare riferimento dinamicamente ai loro percorsi.
• Vuoi includere un piccolo script come pace.js al di fuori del codice in bundle.
• Alcune librerie potrebbero essere incompatibili con Webpack e non hai altra scelta che includerla come tag.

Spero che aiuti qualcun altro! Lasciami un commento se ho bisogno di chiarire qualcosa.

Sto sviluppando un progetto che utilizza SSR e ora voglio condividere la mia soluzione sulla base di alcune risposte qui.

Il mio obiettivo è precaricare un'immagine per mostrarla quando la connessione Internet è offline. (Potrebbe non essere la migliore pratica, ma dal momento che funziona per me, per ora va bene) Cordiali saluti, utilizzo anche ReactHooks in questo progetto.

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

Per usare l'immagine, la scrivo così

<img src="/assets/images/error-review-failed.jpg" />

Prova a cambiare il codice in server.js in -

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

A volte puoi inserire invece che nella posizione dell'immagine / src: try

./assets/images/picture.jpg

invece di

../assets/images/picture.jpg

src={"/images/resto.png"}

L'uso dell'attributo src in questo modo significa che la tua immagine verrà caricata dal percorso assoluto "/images/resto.png" per il tuo sito. La directory delle immagini dovrebbe trovarsi nella radice del tuo sito. Esempio: http://www.example.com/images/resto.png

Ecco cosa ha funzionato per me. Innanzitutto, cerchiamo di capire il problema. Non è possibile utilizzare una variabile come argomento per require. Webpack ha bisogno di sapere quali file raggruppare in fase di compilazione.

Quando ho ricevuto l'errore, ho pensato che potesse essere correlato al problema del percorso in assoluto rispetto a relativo. Quindi ho passato un valore hardcoded per require come di seguito: <img src = {require ("../ assets / images / photosnap.svg")} alt = "" />. Funzionava bene. Ma nel mio caso il valore è una variabile proveniente da props. Ho provato a passare una variabile letterale stringa come alcuni suggerivano. Non ha funzionato. Inoltre ho provato a definire un metodo locale utilizzando switch case per tutti i 10 valori (sapevo che non era la soluzione migliore, ma volevo solo che funzionasse in qualche modo). Anche quello non ha funzionato. Poi sono venuto a sapere che NON possiamo passare la variabile al require.

Come soluzione alternativa, ho modificato i dati nel file data.json per limitarli al solo nome della mia immagine. Questo nome dell'immagine che proviene dagli oggetti di scena come stringa letterale. L'ho concatenato al valore hardcoded, in questo modo:

import React from "react";

function JobCard(props) {  

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

Il valore effettivo contenuto nel logo proviene dal file data.json e fa riferimento a un nome di immagine come photosnap.svg.

Il modo migliore per caricare immagini locali in React è il seguente

Ad esempio, Mantieni tutte le tue immagini (o qualsiasi risorsa come video, caratteri) nella cartella pubblica come mostrato di seguito.

È sufficiente scrivere <img src='/assets/images/Call.svg' />per accedere all'immagine Call.svg da qualsiasi componente reattivo

Nota: mantenere le risorse nella cartella pubblica garantisce che sia possibile accedervi da qualsiasi punto del progetto, semplicemente fornendo "/ path_to_image" e non è necessario alcun attraversamento del percorso "../../" come questo

devi prima importare l'immagine e poi usarla. Ha funzionato per me.

import image from '../image.png'

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