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

75

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.

Geben Sie hier die Bildbeschreibung ein

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.

Shadid
quelle
3
Shadid, hast du versucht <img src = {require ('../../ assets / linux_logo.jpg')} />?
Naga Sai A
Ja, das habe ich versucht. Wieder kein Fehler in der Konsole, aber ich sehe kein Bild
Shadid
1
Sie sollten ein Webpack erstellen und überprüfen, wo die Bilder gespeichert sind. Verwenden Sie diesen Pfad in img src.
Vijayst
@ Vijayst Segne Sie guten Herrn .. Das hat funktioniert. :)
Shadid

Antworten:

127

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>
    );
  }
}
Treycos
quelle
10
Was würde passieren, wenn ich 10 Bilder importieren möchte?
Leo Gasparrini
3
@LeoGasparrini - Ich bin nicht sicher, ob ich verstehe, was Sie fragen - Sie sollten in der Lage sein, so viele zu importieren, wie Sie möchten, solange Sie ihnen beim Import eindeutige Namen geben, nein?
Alexander Nied
1
Ich versuche den gleichen Ansatz und Babel beschwert sich, da es nicht verstehen kann, was eine PNG-Datei ist. Wie kann ich babel PNG-Dateien vom Transpilieren überspringen lassen?
Sanish Joseph
Ich rate Ihnen, eine App zum Erstellen von Reaktionen zu verwenden. Solche Probleme sind bereits mit dem Setup vorgelöst. Und Sie müssen den Prozess nicht neu gestalten
ist es möglich, aus index.ts erneut zu exportieren und auf mehrere Bilder wie dieses zuzugreifen "import {image1, image2, image3} from './../images'" ??
ksh
14

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>
    );
  }
}
Hemadri Dasari
quelle
Mach das niemals, wirft einen Fehler beim Build
Saquib Nasim
7

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>
        )
    } 
}
Rohith Murali
quelle
0
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;
Matiullah Mosazai
quelle
0

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"/>
Senthuran
quelle
0

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"
  />
) )
Albirrkarim
quelle
-1

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

Andre
quelle
Könnte sein und so: importiere React, {Component} von 'react'; Standardklasse exportieren Lektion3 erweitert Komponente {render () {return (<image src = {require ('../ assets / polizei.png')} />); }}
Andre