React nu încarcă imaginile locale (Programare, Javascript, Reactjs)

Petrba a intrebat.

Construiesc o mică aplicație react și imaginile mele locale nu se încarcă. Imagini precum placehold.it/200x200 se încarcă. M-am gândit că poate e ceva cu serverul?

Aici este aplicația mea 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')
);

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

Comentarii

  • Acest lucru înseamnă, de obicei, că serverul web local nu servește imaginile sau că url-ul pe care l-ați specificat este incorect. Deschideți consola browserului dvs. și verificați dacă primiți erori precum 404 not found. –  > Por Mario Tacke.
  • Oameni buni, folosiți doar require(). eg src={require(„image path”)} –  > Por Neeraj Sewani.
  • just use require() = src={require(„image path”)} –  > Por xAtifx.
  • Am găsit soluția aici: simplu. următorul este link-ul: stackoverflow.com/a/63867525/11797566 –  > Por thowfeeq.
  • @NeerajSewani vă mulțumesc pentru ajutor, dar pe viitor vă rog să postați răspunsurile ca răspunsuri, nu ca comentarii. –  > Por Vitaly Zdanevich.
17 răspunsuri
Thomas

Atunci când utilizați Webpack, trebuie să require imagini pentru ca Webpack să le proceseze, ceea ce ar explica de ce imaginile externe se încarcă în timp ce imaginile interne nu o fac, așa că în loc de <img src={"/images/resto.png"} /> trebuie să folosiți <img src={require('/images/image-name.png')} /> înlocuind nume-imagine.png cu numele corect al imaginii pentru fiecare dintre ele. În acest fel, Webpack este capabil să proceseze și să înlocuiască img-ul sursă.

Comentarii

  • Dar cum să importați require? Browserify? Dacă da, atunci cum? Am încercat import {require} from 'browserify'. Dar nu funcționează. –  > Por Shubham Kushwah.
  • @ShubhamKushwah Nu ar trebui să fie nevoie să importați require. Acesta este furnizat ca parte a commonjs. Consultați stackoverflow.com/a/33251937/4103908 și viget.com/articles/gulp-browserify-starter-faq pentru detalii suplimentare care v-ar putea ajuta în utilizarea require și browserify cu Gulp. –  > Por Thomas.
  • @Thomas Problema este atât cu imaginile interne, cât și cu cele externe, acestea nu se încarcă atunci când se încarcă prima dată pagina, dar dacă o reîmprospătez, se vor încărca. Deci, cum ar trebui să rezolv acest lucru – Vă rog să mă ajutați! –  > Por Shubham Kushwah.
  • Primesc o eroare: Module not found: Error: Can't resolve 'MyPNG.png' in 'C:...appcomponentsimages'. Calea către fișier arată bine!. –  > Por reubenjohn.
  • src= {require(‘./reactLogo.svg’)} începeți calea cu ” ./ ” pentru directorul curent pentru a evita erorile. –  > Por cheesey.
Hawkeye Parker

Am început să construiesc aplicația mea cu create-react-app (consultați fila „Create a New App”). README.md care vine cu ea oferă acest exemplu:

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;

Acest lucru a funcționat perfect pentru mine. Iată un link către documentul principal pentru acel README, , care explică (extras):

…Puteți importa un fișier chiar într-un modul JavaScript. Acest lucru îi spune lui Webpack să includă acel fișier în pachet. Spre deosebire de importurile CSS, importul unui fișier vă oferă o valoare de șir de caractere. Această valoare este calea finală pe care o puteți referi în codul dumneavoastră, de exemplu, ca atribut src al unei imagini sau href al unui link către un PDF.

Pentru a reduce numărul de solicitări către server, importul de imagini care au mai puțin de 10 000 de octeți returnează un URI de date în loc de o cale. Acest lucru este valabil pentru următoarele extensii de fișiere: bmp, gif, jpg, jpeg și png…

Comentarii

  • În plus, trebuie să exportați imaginile de undeva pentru a le putea importa oriunde și nu doar din același director, ceea ce ar fi cazul dacă nu ar fi exportate. Ele ar trebui să se afle în același director ca și componenta în care sunt importate. Veți observa că, în cazul oricărei aplicații React noi create cu CRA, de exemplu, fișierul logo.svg se află în același director cu App.js, în care este importat. Am scris un articol despre importul de imagini în React aici: blog.hellojs.org/importing-images-in-react-c76f0dfcb552 –  > Por Maria Campbell.
  • Pentru a urmări comentariul de mai sus, dacă utilizați webpack url-loader așa cum arată fandro mai sus, fișierele care se potrivesc cu extensiile de testare în webpack sunt exportate automat și le fac disponibile pentru a importa salvarea Hawkeye Parker a arătat mai sus. –  > Por dave4jr.
  • Știu că acesta este un subiect foarte vechi, dar totuși ; cum ai făcut asta să funcționeze? În cazul meu, programul încearcă să „citească imaginea”… rezultând o eroare îngrozitoare: Unexpected character '�' (1:0) > 1 | �PNG | ^ 2 | 3 | 4 | IHDR��r~ipHYs���o�d��IDATx^�}���Ü�d7�w¿½ï¿½ ��JzH!�Kï¿½ï … –  > Por V. Courtois.
  • @V.Courtois îmi pare rău – nu am mai lucrat cu chestia asta de atunci și nu-mi amintesc mai multe detalii în acest moment 🙁 –  > Por Hawkeye Parker.
  • A trebuit să adaug imaginile mele în folderul public din proiectul Create-React-App. –  > Por pixel 67.
fandro

O altă modalitate de a face:

Mai întâi, instalați aceste module: url-loader, , file-loader

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

Apoi, adăugați acest lucru la configurația Webpack:

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

limit: Limitarea numărului de octeți la fișierele inline ca Data URL

Trebuie să instalați atât module: url-loader și file-loader

În cele din urmă, puteți face:

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

Puteți cerceta aceste încărcătoare în continuare aici:

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

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

Comentarii

  • Sperăm că îi va ajuta și pe alții. A trebuit să fac și eu acest lucru; Install url-loader. npm install --save-dev url-loader –  > Por LUser.
  • M-am luptat cu acest lucru noaptea trecută, iar acest post a fost de fapt pe ecranul meu în această dimineață 🙂 Dacă vedeți ceva de genul Module build failed: SyntaxError: c:/contrivedpath/images/profile.jpg: Unexpected character '�' (1:0), , tot ce trebuie să faceți este să adăugați această configurație url-loader de mai sus la configurația webpack, npm install url-loader ȘI file-loader și veți fi funcțional. Am testat pentru a mă asigura, iar file-loader este necesar. –  > Por agm1984.
  • @agm1984 Am urmat pașii de mai sus și încă mai primesc mesajul ERROR in ./src/images/imagename.png Module parse failed: Unexpected character '�' (1:0) mesaj. Aveți vreo idee? –  > Por David.
  • a fost foarte util, dar nu reușesc să înțeleg de ce <img src=”images/myimage.png” /> nu va funcționa!!! Ați putea explica vă rog? –  > Por Mark.
  • A făcut tot ce ai spus, dar nu zaruri. Webpack se construiește fără să se plângă, pot vedea că imaginea mea PNG a fost mutată în directorul de ieșire, dar imaginea nu se încarcă pe pagină. Când inspectez codul, acesta spune doar src=[Object module] iar când trec cu mouse-ul pe ecran apare „nu s-a putut încărca imaginea” –  > Por JSStuball.
Kiszuriwalilibori

De fapt aș vrea să comentez, dar nu sunt autorizat încă. De aceea, care pretind a fi următorul răspuns în timp ce nu este.

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

Aș dori să continui această cale. Asta funcționează fără probleme atunci când cineva are o imagine pe care o poate insera simplu. În cazul meu este puțin mai complex: trebuie să mapez mai multe imagini. Până acum, singura modalitate viabilă de a face acest lucru pe care am găsit-o este următoarea

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

Așadar, întrebarea mea este dacă există modalități mai simple de a prelucra aceste imagini? Inutil să mai spun că, în cazul mai general, numărul de fișiere care trebuie importate la propriu ar putea fi uriaș și numărul de chei din obiect, de asemenea. (Obiectul în acel cod este implicat în mod clar pentru a se referi prin nume -cheile sale)În cazul meu, procedurile legate de require nu au funcționat – încărcătoarele au generat erori de tip ciudat în timpul instalării și nu au arătat nici un semn de funcționare; și nici require în sine nu a funcționat.

Comentarii

  • Exact aceasta este și întrebarea mea. Nu știu de ce nu răspunde nimeni la ea! :-/ Ați rezolvat această problemă –  > Por Akhila.
Mokesh S

Cea mai bună modalitate de a încărca imagini locale în react este următoarea

De exemplu, Păstrați toate imaginile(sau orice active precum videoclipuri, fonturi) în folderul public, așa cum se arată mai jos.

Pur și simplu scrieți <img src='/assets/images/Call.svg' /> pentru a accesa imaginea Call.svg din oricare dintre componentele dvs. react

Notă: Păstrarea activelor dvs. în folderul public vă asigură că, puteți să le accesați de oriunde din proiect, dând doar „/path_to_image” și nu este nevoie de nicio traversare a căii „../../”, ca aceasta

Comentarii

  • Imaginea PNG nu va funcționa în acest caz? Bcuz Am făcut exact acest lucru și nu a funcționat. –  > Por maverick.
  • PNG va funcționa, de asemenea, PNG. A SVG este de lucru pentru tine? Vă rugăm să faceți verificarea ortografică a numelui de fișier și să vă asigurați că calea imaginii este corectă. –  > Por Mokesh S.
  • scuze pentru această greșeală. Eram nou în react și nu știam că fișierul component trebuie să înceapă cu majusculă. După aceea a funcționat. –  > Por maverick.
  • Aceasta a fost problema. Dar mă întreb de ce nu putem accesa fișierele din alte foldere. –  > Por Anupam Kumar.
vancy-pants

Și eu aș dori să adaug la răspunsurile lui @Hawkeye Parker și @Kiszuriwalilibori:

După cum s-a observat din documentație aici, , de obicei, cel mai bine este să importați imaginile după cum este necesar.

Cu toate acestea, aveam nevoie ca multe fișiere să fie încărcate dinamic, ceea ce m-a determinat să pun imaginile în folderul public (se menționează și în README), din cauza acestei recomandări de mai jos din documentație:

În mod normal, recomandăm să importați foile de stil, imaginile și fonturile din JavaScript. Dosarul public este util ca o soluție de rezolvare pentru o serie de cazuri mai puțin frecvente:

  • Aveți nevoie de un fișier cu un nume specific în rezultatul compilării, cum ar fi manifest.webmanifest.
  • Aveți mii de imagini și trebuie să faceți referințe dinamice la căile lor.
  • Doriți să includeți un script mic, cum ar fi pace.js, în afara codului inclus în pachet.
  • Este posibil ca o anumită bibliotecă să fie incompatibilă cu Webpack și nu aveți altă opțiune decât să o includeți ca etichetă.

Sper că ajută pe altcineva! Lăsați-mi un comentariu dacă trebuie să clarific ceva.

Comentarii

  • omule asta m-a ajutat! Am simțit că documentația este confuză pentru că mai întâi descurajează oamenii să adauge imagini în folderul public, apoi vorbesc despre aceste scenarii excepționale – care este ca și cum ar fi scenariul comun tot timpul – încărcarea dinamică a mai multor imagini ! –  > Por Akhila.
Omama Zainab

trebuie să importați mai întâi imaginea, apoi să o folosiți. A funcționat pentru mine.


import image from '../image.png'

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


Comentarii

  • aceasta este o soluție curată pentru mine, mulțumesc @omama zainab –  > Por mikaelovi.
adamj

Am vrut doar să las următoarele care îmbunătățesc răspunsul acceptat mai sus.

În plus față de răspunsul acceptat, vă puteți face viața un pic mai ușoară specificând un alias path în Webpack, astfel încât să nu trebuie să vă faceți griji cu privire la locul în care se află imaginea în raport cu fișierul în care vă aflați. Vă rugăm să vedeți exemplul de mai jos:

Fișier Webpack:

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

Use:

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

Vinsensius Danny

Dezvolt un proiect care utilizează SSR și acum vreau să împărtășesc soluția mea bazată pe unele răspunsuri de aici.

Obiectivele mele sunt de a preîncărca o imagine pentru a o afișa atunci când conexiunea la internet este offline. (S-ar putea să nu fie cea mai bună practică, dar din moment ce funcționează pentru mine, este în regulă pentru moment)FYI, folosesc, de asemenea, ReactHooks în acest proiect.

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

Pentru a utiliza imaginea, am scris așa

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

ADITHYA AJAY

Făcând un simplu import, puteți accesa imaginea în React

import logo from "../images/logo.png";
<img src={logo}/>

Totul este rezolvat! Doar o simplă remediere =)

riscant

Încercați să schimbați codul din server.js în –

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

Kean Amaral

Uneori este posibil să introduceți în loc de în locația imaginii/src:încercați

./assets/images/picture.jpg

în loc de

../assets/images/picture.jpg

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

Utilizarea atributului src în acest mod înseamnă că imaginea dvs. va fi încărcată din calea absolută „/images/resto.png” pentru site-ul dvs. Directorul de imagini trebuie să fie localizat la rădăcina site-ului dvs. Exemplu: http://www.example.com/images/resto.png

Venky4c

Iată ce a funcționat pentru mine. În primul rând, să înțelegem problema. Nu puteți utiliza o variabilă ca argument pentru require. Webpack trebuie să știe ce fișiere să grupeze în momentul compilării.

Când am primit eroarea, m-am gândit că poate fi legată de problema de cale ca în absolut vs relativ. Așa că am trecut o valoare codificată în mod greșit la require, ca mai jos:<img src={require(„../assets/images/photosnap.svg”)} alt=”” />. A funcționat bine. Dar, în cazul meu, valoarea este o variabilă provenită din props. Am încercat să trec o variabilă literală de tip șir de caractere, așa cum au sugerat unii. Nu a funcționat. De asemenea, am încercat să definesc o metodă locală folosind switch case pentru toate cele 10 valori (știam că nu este cea mai bună soluție, dar voiam doar să funcționeze cumva). Nici asta nu a funcționat. Apoi am aflat că NU putem trece o variabilă la require.

Ca o soluție am modificat datele din fișierul data.json pentru a le limita doar la numele imaginii mele. Acest nume al imaginii, care provine din props ca un String literal. L-am concatenat cu valoarea codificată, astfel:

import React from "react";

function JobCard(props) {  

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

Valoarea reală conținută în logo ar proveni din fișierul data.json și s-ar referi la un nume de imagine cum ar fi photosnap.svg.

Anupam Kumar

M-am confruntat cu aceeași problemă și am aflat că problema era locația imaginilor mele. în loc să le salvez în fișierul src folder, ar trebui să le stocați în folderul public director și să aveți acces direct.

Kudos.

Comentarii

  • Mulțumesc, aceasta a fost problema mea –  > Por Surya Nath.
Aye

Iată cum am făcut-o pe a mea: dacă utilizați npx create-react-app pentru a vă configura react, trebuie să importați imaginea din folderul său în Componenta în care doriți să o utilizați. Este exact modul în care importați alte module din folderele lor.

Așadar, trebuie să scrieți:

import myImage from './imageFolder/imageName'

Apoi, în JSX-ul tău, poți avea ceva de genul acesta: <image src = {myImage} />

Vedeți în captura de ecran de mai jos:

thowfeeq

Voi împărtăși soluția mea care a funcționat pentru mine într-un proiect create-react-app:

în același folder images includeți un fișier js care exportă toate imaginile, iar în componentele în care aveți nevoie de imagine importați acea imagine și folosiți-o :), Yaaah asta este, să vedem în detaliu

structura folderului cu fișierul JS

// js file in images folder
export const missing = require('./missingposters.png');
export const poster1 = require('./poster1.jpg');
export const poster2 = require('./poster2.jpg');
export const poster3 = require('./poster3.jpg');
export const poster4 = require('./poster4.jpg');

puteți importa în componenta dvs.:import {missing , poster1, poster2, poster3, poster4} din ‘../../assets/indexImages’;

acum puteți folosi acest lucru ca src pentru tag-ul de imagine.

Codare fericită!