Afișarea imaginilor în React folosind JSX fără importuri (Programare, Javascript, Reactjs, Jsx)

Gayathri a intrebat.

Problema cu care m-am confruntat este cu img tag. Când este vorba de o singură imagine,Codul de mai jos încarcă imaginea:

import image1 from './images/image1.jpg';
<img src={image1} />

Dar codul de mai jos nu se încarcă:

 <img src={'./images/image1.jpg'}/>
            or
  <img src='./images/image1.jpg'/>

Am nevoie de o buclă prin json, ceva de genul:

[{'img':'./images/image1.jpg','name':'AAA'}, {'img':'./images/image2.jpg','name':'BBB'}]

În plus, să le afișez pe fiecare dintre ele ca imagine cu numele în subsol. Bucla este în regulă, dar imaginile nu se încarcă. De fapt, nu este posibil pentru mine să import fiecare imagine pentru a o adăuga. Deocamdată nu folosesc nimic altceva decât JSX. Vă rugăm să favorizați.

Comentarii

  • În fila de rețea din browserul dvs. credeți că că sunt URL-urile imaginilor? –  > Por Paul Collingwood.
6 răspunsuri
Robsonsjre

require este folosit pentru „importuri” statice, așa că trebuie doar să schimbați imports.

Exemplu:

var imageName = require('./images/image1.jpg')
<img src={imageName} />

Comentarii

  • sunteți binevenit 🙂 Puteți accepta răspunsul meu ca rezolvând problema dvs., astfel încât să ajute comunitatea stackoverflow –  > Por Robsonsjre.
  • Am încercat. dar primesc o notificare cum că pot accepta după 4 minute în prezent. –  > Por Gayathri.
  • Ai dreptate! chiar are acel „timp de așteptare”..haha -.  > Por Robsonsjre.
Câștigă

Trebuie să solicitați fișierul astfel:

<img src={ require('./images/image1.jpg') } />

Comentarii

  • eslint se plânge de acest lucru spune „Unexpected require(). (global-require)” De asemenea, spune „Calls to require() should use string literals (import/no-dynamic-require)” – –  > Por pixelwiz.
  • @pixelwiz Dacă ați activat această setare, înlocuiți ‘ cu backticks `. –  > Por Win.
  • De fapt, a trebuit să fac un fișier separat care să importe toate imaginile, apoi am putut importa acel fișier și să fac referire la imagini. Se simte cam nebunesc, dar acum React, Webpack și ESLint par să fie fericiți. –  > Por pixelwiz.
VELDAS R DURAI

Am putea folosi require în loc de import statment.Like ,

<img src={require("folder/image.format")} alt="image not found" />

Dar dacă îl rulați , se va afișa imaginea nu a fost găsită!!!

Am putea rezolva pur și simplu prin modificarea statmentului prin adăugarea de .default

let image = require("folder/image.format");

<img src={image.default} alt="image not found" />

Comentarii

  • Amuzant. După 3 ani de la această întrebare, mi se pare util acest comentariu specific. Aveam nevoie de asta default pentru un anumit motiv. –  > Por Saehun Sean Oh.
  • M-a ajutat și pe mine, răspunsul original a compilat, dar nu a afișat imaginea solicitată. Mulțumesc.  > Por springe.
Daniel C. Deng

Tocmai am încercat acest lucru, funcționează!

import I01d from '../../styles/images/01d.png';
....
<img src={this.getWeatherIconImage(iconCode)}/>

getWeatherIconImage(icon) {
  switch (icon) {
    case '01d': return I01d; ...
    default: break;
  }
}

Bruce

Răspunsurile sugerate nu par să mai funcționeze. Iată un fragment de cod care evidențiază problema.

import React from 'react';
import importImg from '../images/img.jpg';
export default function ImgTest(){
return(<>
<img src={importImg} alt='import'></img><br/>
<img src={require('../images/img.jpg')} alt='require function fails'></img><br/>
</>)
}

Când acest cod este redat, se întâmplă următoarele.

1st afișează imaginea – este rezultatul așteptat

Al 2-lea afișează alt „require function fails” – nu este rezultatul așteptat

FL Alfie

Este din cauză că ai pus folderul de imagini în folderul src. Așa că ar trebui să îl importați sau să îl cereți. Poți pune direct sursa imaginii dacă este plasată în folderul public fără a importa sau a folosi require, așa.

<img src=’/images/image1.jpg’ />