Wie verweise ich in React auf ein lokales Bild?

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

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.

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

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

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

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

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.

import image from './img/one.jpg';

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

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

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

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/

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!

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