So importieren Sie ein Bild (.svg, .png) in eine Reaktionskomponente

Ich versuche, eine Bilddatei in eine meiner Reaktionskomponenten zu importieren. Ich habe das Projekt mit Web Pack eingerichtet

Hier ist mein Code für die Komponente

import Diamond from '../../assets/linux_logo.jpg';

 export class ItemCols extends Component {
    render(){
        return (
            <div>
                <section className="one-fourth" id="html">
                    <img src={Diamond} />
                </section>
            </div>
        )
    } 
}

Hier ist meine Projektstruktur.

Ich habe meine Datei webpack.config.js folgendermaßen eingerichtet

{
    test: /\.(jpg|png|svg)$/,
    loader: 'url-loader',
    options: {
      limit: 25000,
    },
},
{
    test: /\.(jpg|png|svg)$/,
    loader: 'file-loader',
    options: {
      name: '[path][name].[hash].[ext]',
    },
},

PS. Ich kann Bilder von jeder anderen Remote-Quelle abrufen, jedoch keine lokal gespeicherten Bilder. Die JavaScript-Konsole gibt mir auch keinen Fehler. Bitte alles hilft. Ich bin ziemlich neu zu reagieren und kann nicht finden, was ich falsch mache.

versuchen Sie es mit

import mainLogo from'./logoWhite.png';

//then in the render function of Jsx insert the mainLogo variable

class NavBar extends Component {
  render() {
    return (
      <nav className="nav" style={nbStyle}>
        <div className="container">
          //right below here
          <img  src={mainLogo} style={nbStyle.logo} alt="fireSpot"/>
        </div>
      </nav>
    );
  }
}

Sie können require auch verwenden, um Bilder wie zu rendern

//then in the render function of Jsx insert the mainLogo variable

class NavBar extends Component {
  render() {
    return (
      <nav className="nav" style={nbStyle}>
        <div className="container">
          //right below here
          <img src={require('./logoWhite.png')} style={nbStyle.logo} alt="fireSpot"/>
        </div>
      </nav>
    );
  }
}

Wenn sich die Bilder im Ordner src / assets befinden, können Sie sie requiremit dem richtigen Pfad in der require-Anweisung verwenden.

var Diamond = require('../../assets/linux_logo.jpg');

 export class ItemCols extends Component {
    render(){
        return (
            <div>
                <section className="one-fourth" id="html">
                    <img src={Diamond} />
                </section>
            </div>
        )
    } 
}

import React, {Component} from 'react';
import imagename from './imagename.png'; //image is in the current folder where the App.js exits


class App extends React. Component{
    constructor(props){
     super(props)
     this.state={
      imagesrc=imagename // as it is imported
     }
   }

   render(){
       return (

        <ImageClass 
        src={this.state.imagesrc}
        />
       );
   }
}

class ImageClass extends React.Component{
    render(){
        return (

            <img src={this.props.src} height='200px' width='100px' />
        );
    }
}

export default App;

Ich hatte auch eine ähnliche Anforderung, wo ich .png-Bilder importieren muss. Ich habe diese Bilder in einem öffentlichen Ordner gespeichert. Der folgende Ansatz hat also für mich funktioniert.

<img src={process.env.PUBLIC_URL + './Images/image1.png'} alt="Image1"></img> 

Zusätzlich zu den oben genannten habe ich versucht, erfordern auch zu verwenden und es hat auch für mich funktioniert. Ich habe die Bilder in den Ordner "Bilder" im Verzeichnis "src" aufgenommen.

<img src={require('./Images/image1.png')}  alt="Image1"/>

Der einfache Weg ist die Verwendung von location.origin.
Es wird Ihre Domain
ex
http: // localhost: 8000
https://yourdomain.com zurückgeben

dann mit einer Schnur besprechen ...
Viel Spaß ...

<img src={ location.origin+"/images/robot.svg"} alt="robot"/>

Mehr Bilder ?

var images =[
"img1.jpg",
"img2.png",
"img3.jpg",
]

images.map( (image,index) => (

  <img key={index} 
       src={ location.origin+"/images/"+image} 
       alt="robot"
  />
) )

Das Problem wurde behoben, als der Ordner mit dem Bild im Ordner src verschoben wurde. Dann wandte ich mich dem Bild zu (Projekt erstellt mit "create-react-app")
let image = document.createElement ("img"); image.src = require ('../ Assets / Police.png');