Wie verweise ich in React auf ein lokales Bild?

165

Wie kann ich ein Bild aus dem lokalen Verzeichnis laden und in das reactjs img srcTag aufnehmen?

Ich habe ein Bild one.jpegim selben Ordner wie meine Komponente und habe beide <img src="one.jpeg" />und <img src={"one.jpeg"} />innerhalb meiner renderFunktion ausprobiert, aber das Bild wird nicht angezeigt. Außerdem habe ich keinen Zugriff auf die webpack configDatei, da das Projekt mit der offiziellen create-react-appBefehlszeile util erstellt wird.

Update: Dies funktioniert, wenn ich das Bild zum ersten Mal mit importiere import img from './one.jpeg'und darin verwende img src={img}, aber ich habe so viele Bilddateien zum Importieren und möchte sie daher im Formular verwenden img src={'image_name.jpeg'}.

Postleitzahl
quelle
2
Mögliches Duplikat von React lädt keine lokalen Bilder
Vanuan
Ich habe tatsächlich ein ähnliches Problem, mein Bild wurde in die Datei index.jsx importiert, ich habe die Lader im Webpack, das Kompilierungsgesicht funktioniert einwandfrei, da tatsächlich eine Kopie des Bildes auf meinem Server / public / js erstellt wurde Ordner mit einer Zufallszahl und dem richtigen Pfad dazu befindet sich im Bundler, aber ich kann das Bild nicht visualisieren. Es ist auch seltsam, dass es auf dem Server / public / js und nicht auf dem Server / public / img erstellt wurde, wie ich in index.js geschrieben habe
Carmine Tambascia

Antworten:

302

Wickeln Sie zuerst den src ein {}

Wenn Sie dann Webpack verwenden; Anstatt: <img src={"./logo.jpeg"} />

Möglicherweise müssen Sie Folgendes verwenden:

<img src={require('./logo.jpeg')} />


Eine andere Möglichkeit wäre, zuerst das Bild als solches zu importieren:

import logo from './logo.jpeg'; // with import

oder ...

const logo = require('./logo.jpeg); // with require

dann stecken Sie es ein ...

<img src={logo} />

Ich würde diese Option besonders empfehlen, wenn Sie die Bildquelle wiederverwenden.

Apswak
quelle
13
Achten Sie darauf, die .am Anfang der relativen URL stehende nicht zu vergessen . Sollte sein<img src={require('./one.jpeg')} />
Nuhman
1
Beeinträchtigt eine dieser Methoden die Leistung wie die Ladezeit des Bildes? Wenn ja, welches ist leistungsmäßig besser?
Inaam ur Rehman
1
@ انعامالرحمٰن - Einige Kommentare hier stackackflow.com/questions/31354559/… aber die TL; DR ist nein, kein Leistungsunterschied.
Apswak
Hier fehlt die Tatsache, dass zumindest bei Webpack 4 der zu verwendende Loader ein URL-Loader anstelle der Datei eins oder der vorherigen ist
Carmine Tambascia
64

Am besten importieren Sie das Bild zuerst und verwenden es dann.

import React, { Component } from 'react';
import logo from '../logo.svg';
export default class Header extends Component {
  render() {
    return (
      <div className="row">
        <div className="logo">
          <img src={logo} width="100" height="50" />
        </div>
      </div>
    );
  }
} 
Arslan Shakoor
quelle
1
Warum ist es der beste Weg?
Jason Leach
8
Dies ist der beste Weg, wenn Sie dieselbe Komponente wiederverwenden müssen. Sie können sie auch ohne Pfadreferenz verwenden. Es ist eine gute Praxis @ JasonLeach
Arslan Shakoor
Jason Leach es ist sauberer Weg
Arslan Shakoor
8

Sie müssen Ihren Bildquellenpfad darin einschließen {}

<img src={'path/to/one.jpeg'} />

Sie müssen verwenden, requirewenn Sie verwendenwebpack

<img src={require('path/to/one.jpeg')} />
Shubham Khatri
quelle
8

Innerhalb öffentlich ein Ordner erstellen Assets Ordner und legen Bildpfad entsprechend.

<img className="img-fluid" 
     src={`${process.env.PUBLIC_URL}/assets/images/uc-white.png`} 
     alt="logo"/>
Harshvardhan Singh Baghel
quelle
Vielen Dank, dies hat sich für mich in einer Situation als nützlich erwiesen, in der Bilder möglicherweise im Ordner vorhanden sind oder nicht, da sie basierend auf der angezeigten Ressource dynamisch importiert werden.
Sébastien De Varennes
4

Der beste Weg zum Importieren von Bildern ist ...

import React, { Component } from 'react';

// image import
import CartIcon from '../images/CartIcon.png';

 class App extends Component {
  render() {
    return (
     <div>
         //Call image in source like this
          <img src={CartIcon}/>
     </div>
    );
  }
}
Abdul Moiz
quelle
1
Relative Importe außerhalb von src / werden nicht unterstützt. Um dies zu tun, müssen Sie Ihre Bilder in src / behalten, was nicht empfohlen wird
toing_toing
@toing_toing Warum empfehlen Sie nicht, Bilder in src zu behalten? Die offizielle Dokumentation enthält Beispiele, wo dies der Fall ist: facebook.github.io/create-react-app/docs/…
roob
Erhöht die Größe des Webpack-Bundles und die Kompilierungszeit, muss jedes Mal neu kompiliert werden, wenn Sie ein Asset ändern, und erhöht die Ladezeit. Ich würde es lieber in den öffentlichen Ordner legen und per URL verlinken.
toing_toing
4
@toing_toing Du sagst, du würdest lieber ..., aber du sagst nicht, wie das geht.
Thomas Jay Rush
1

Meine Antwort ist im Grunde der von Rubzen sehr ähnlich. Ich benutze das Bild übrigens als Objektwert. Zwei Versionen funktionieren für mich:

{
"name": "Silver Card",
"logo": require('./golden-card.png'),

oder

const goldenCard = require('./golden-card.png');
{ "name": "Silver Card",
"logo": goldenCard,

Ohne Wrapper - aber das ist auch eine andere Anwendung.

Ich habe auch "Import" -Lösung überprüft und in einigen Fällen funktioniert es (was nicht überraschend ist, dass es in Muster App.js in React angewendet wird), aber nicht in dem Fall wie meinem oben.

Kiszuriwalilibori
quelle
0
import image from './img/one.jpg';

class Icons extends React.Component{
    render(){
      return(
        <img className='profile-image' alt='icon' src={image}/>
    );
    }
}
export default Icons;
Emyboy
quelle
0

Ich habe diesen Weg benutzt und er funktioniert ... Ich hoffe, Sie sind nützlich.

const logofooter = require('../../project-files/images/logo.png');

 return(
 <div className="blockquote text-center">
            <img src={logofooter} width="100" height="80" />
 <div/>
);
Rubzen
quelle
0
import React from "react";   
import image from './img/one.jpg';

class Image extends React.Component{
  render(){
    return(
      <img className='profile-image' alt='icon' src={image}/>
   );
  }
}

Standardbild exportieren

LOVENEET SINGH
quelle
0

Wie einige in den Kommentaren erwähnt, können Sie die Bilder in den öffentlichen Ordner legen. Dies wird auch in den Dokumenten der Create-React-App erklärt: https://create-react-app.dev/docs/using-the-public-folder/

Farbwischer
quelle
Es wird tatsächlich nicht mehr Code benötigt als die eine Zeile in den Dokumenten<img src={process.env.PUBLIC_URL + '/img/logo.png'} />
dyedwiper
0

Ich habe einen anderen Weg gefunden, dies zu implementieren (dies ist eine funktionale Komponente):

const Image = ({icon}) => {
   const Img = require(`./path_to_your_file/${icon}.svg`).ReactComponent;
   return <Img />
}

Ich hoffe es hilft!

Kai Sheng Tung
quelle
0

Sie haben zwei Möglichkeiten, dies zu tun.

Zuerst

Importieren Sie das Bild über die Klasse und verweisen Sie dann wie folgt auf Ihr <img/>Element

import React, { Component } from 'react';
import myImg from '../path/myImg.svg';

export default class HelloImage extends Component {
  render() {
    return <img src={myImg} width="100" height="50" /> 
  }
} 

Zweite

Sie können das Bild direkt Pfad angeben require('../pathToImh/img')in <img/>wie dieses Element

import React, { Component } from 'react'; 

export default class HelloImage extends Component {
  render() {
    return <img src={require(../path/myImg.svg)} width="100" height="50" /> 
  }
}

Hadi Mir
quelle