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.
javascript
reactjs
webpack
Shadid
quelle
quelle
Antworten:
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> ); } }
quelle
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> ); } }
quelle
Wenn sich die Bilder im Ordner src / assets befinden, können Sie sie
require
mit 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> ) } }
quelle
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;
quelle
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"/>
quelle
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" /> ) )
quelle
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');
quelle