web-dev-qa-db-de.com

React lädt keine lokalen Bilder

Ich baue eine kleine Reaktions-App und meine lokalen Bilder werden nicht geladen. Bilder wie Platzhalter.it/200x200 werden geladen. Ich dachte vielleicht könnte es etwas mit dem Server sein? Die vollständige Quelle auf github .

Hier ist meine App.js

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div className="home-container">
                <div className="home-content">
                    <div className="home-text">
                        <h1>foo</h1>
                    </div>
                    <div className="home-arrow">
                        <p className="arrow-text">
                            Vzdělání
                        </p>
                        <img src={"/images/resto.png"} />
                    </div>
                </div>
            </div>
        );
    }
}

export default App;

index.js:

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Router, Route, Link } from 'react-router';
import { createHistory } from 'history';
import App from './components/app';

let history = createHistory();

render(
    <Router history={history} >
        <Route path="/" component={App} >
            <Route path="vzdelani" component="" />
            <Route path="znalosti" component="" />
            <Route path="prace" component="" />
            <Route path="kontakt" component="" />
        </Route>
        <Route path="*" component="" />
    </Router>,
    document.getElementById('app')
);

und server.js:

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev');

var app = express();
var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));
});

app.listen(3000, 'localhost', function(err) {
  if (err) {
    console.log(err);
    return;
  }

  console.log('Listening at http://localhost:3000');
});
51
Petrba

Wenn Sie Webpack verwenden, müssen Sie require Bilder verwenden, damit Webpack sie verarbeiten kann. Dies würde erklären, warum externe Bilder nicht geladen werden. Daher müssen Sie anstelle von <img src={"/images/resto.png"} /><img src={require('/images/image-name.png')} /> verwenden, wobei image_name.png durch den korrekten Bildnamen ersetzt wird von ihnen. Auf diese Weise kann Webpack die Quelle img verarbeiten und ersetzen.

138
Thomas

Eine andere Möglichkeit:

Installieren Sie zuerst diese Module: url-loader, file-loader

Npm verwenden: npm install --save-dev url-loader file-loader

Als nächstes fügen Sie dies Ihrer Webpack-Konfiguration hinzu:

module: {
    loaders: [
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
    ]
  }

limit: Byte-Begrenzung auf Inline-Dateien als Daten-URL

Sie müssen beide -Module installieren: url-loader und file-loader

Zum Schluss können Sie:

<img src={require('./my-path/images/my-image.png')}/>

Sie können diese Lader hier weiter untersuchen:

uRL-Loader: https://www.npmjs.com/package/url-loader

file-loader: https://www.npmjs.com/package/file-loader

22
fandro

Ich habe mit dem Erstellen meiner App mit create -react-app begonnen (siehe Registerkarte "Neue App erstellen"). Die mitgelieferte README.md gibt dieses Beispiel:

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

export default Header;

Das hat perfekt für mich funktioniert. Hier ist ein Link zum Master-Dokument für das README , das (Auszug) erklärt:

... Sie können eine Datei direkt in ein JavaScript-Modul importieren. Dies teilt Webpack mit diese Datei in das Bundle aufnehmen. Im Gegensatz zu CSS-Importen wird ein .__ importiert. Datei gibt Ihnen einen String-Wert. Dieser Wert ist der letzte Pfad, den Sie können Referenz in Ihrem Code, z. als src-Attribut eines Bildes oder der href eines Links zu einem PDF.

Um die Anzahl der Anforderungen an den Server zu reduzieren, importieren Sie Bilder, die sind weniger als 10.000 Byte gibt einen Daten-URI anstelle eines Pfads zurück. Diese gilt für die folgenden Dateierweiterungen: bmp, gif, jpg, jpeg und png ...

19
Hawkeye Parker

Eigentlich möchte ich gerne kommentieren, bin aber noch nicht autorisiert. Aus diesem Grund geben wir vor, die nächste Antwort zu sein, während dies nicht der Fall ist.

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png

function Header() {
// Import result is the URL of your image
  return <img src={logo} alt="Logo" />;

Ich möchte diesen Weg fortsetzen. Das funktioniert problemlos, wenn man ein Bild hat, das man einfach einfügen kann. In meinem Fall ist das etwas komplexer: Ich muss mehrere Bilder dazu abbilden. Die einzige praktikable Methode, die ich dazu gefunden habe, ist die folgende

import upperBody from './upperBody.png';
import lowerBody from './lowerBody.png';
import aesthetics from './aesthetics.png';

let obj={upperBody:upperBody, lowerBody:lowerBody, aesthetics:aesthetics, agility:agility, endurance:endurance}

{Object.keys(skills).map((skill) => {
 return ( <img className = 'icon-size' src={obj[skill]}/> 

Meine Frage ist also, ob es einfachere Wege gibt, diese Bilder zu verarbeiten. Es ist unnötig zu erwähnen, dass in einem allgemeineren Fall die Anzahl der Dateien, die buchstäblich importiert werden müssen, sehr groß sein kann und auch die Anzahl der Schlüssel in einem Objekt. (Das Objekt in diesem Code bezieht sich eindeutig auf die Namen -its-Schlüssel.) In meinem Fall haben die erforderlichen Prozeduren nicht funktioniert. Die Ladeprogramme haben bei der Installation Fehler seltsamer Art generiert und zeigten keine Funktionsspuren. und fordern an sich hat auch nicht funktioniert.

3

Ich möchte auch zu den Antworten von @Hawkeye Parker und @Kiszuriwalilibori beitragen:

Wie in den Dokumenten hier erwähnt, ist es normalerweise am besten, die Bilder nach Bedarf zu importieren.

Ich brauchte jedoch viele Dateien, um dynamisch geladen zu werden, was dazu führte, dass die Bilder im öffentlichen Ordner abgelegt wurden ( auch in README ) angegeben, da diese Empfehlung aus der Dokumentation folgt:

Normalerweise empfehlen wir, Stylesheets, Bilder und Schriftarten aus JavaScript zu importieren. Der Öffentliche Ordner ist als Problemumgehung für eine Reihe weniger häufiger Fälle hilfreich:

  • Sie benötigen eine Datei mit einem bestimmten Namen in der Build-Ausgabe, z. B. manifest.webmanifest.
  • Sie haben Tausende von Bildern und müssen ihre Pfade dynamisch referenzieren.
  • Sie möchten ein kleines Skript wie pace.js außerhalb des mitgelieferten Codes einfügen.
  • Einige Bibliotheken sind möglicherweise nicht mit Webpack kompatibel, und Sie haben keine andere Möglichkeit, als es als Tag einzuschließen.

Hoffe das hilft jemand anderem! Hinterlasse mir einen Kommentar, wenn ich etwas davon aufklären muss.

2
vancy.pants

Das sollte eher ein Kommentar sein und keine Antwort, aber ich habe keinen ausreichenden Ruf. Hier geht es um eine "Bedarfslösung". Es funktioniert in einer Umgebung wie beschrieben.

 #root {

  background-image: url(../images/books.jpg);
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;

}

1

Manchmal können Sie anstelle von in Ihr Bildverzeichnis/src:

./assets/images/picture.jpg

anstatt

../assets/images/picture.jpg
0
Kean Amaral

Ändern Sie den Code in server.js in -.

app.use(require('webpack-dev-middleware')(compiler, {
      noInfo: true,
      publicPath: config.output.path
    }));
0
hazardous

Die effektivste Lösung, auf die ich gestoßen bin, bestand darin, das Bild mit CSS einzustellen

.profile_img {
   background-image: url('https://img.icons8.com/contacts.png');
}

Sie können Ihrem jsx einen ähnlichen Klassennamen geben

 <Icon className="profile_img" />

In der Komponentendeklaration können Sie dies einfach tun

const Icon = () => {
   return(
     <img src='' alt='profileicon'/>
   )
}
0
John Nyingi

Ich wollte nur das Folgende lassen, was die akzeptierte Antwort oben unterstreicht.

Zusätzlich zur akzeptierten Antwort können Sie Ihr Leben etwas einfacher machen, indem Sie einen alias-Pfad in Webpack angeben. So müssen Sie sich keine Sorgen machen, wo sich das Bild relativ zu der aktuellen Datei befindet unten:

Webpack-Datei:

module.exports = {
  resolve: {
    modules: ['node_modules'],
    alias: {
      public: path.join(__dirname, './public')
    }
  },
}

Benutzen:

<img src={require("public/img/resto.ong")} />
0
adamj
src={"/images/resto.png"}

Wenn Sie das Attribut src auf diese Weise verwenden, wird Ihr Bild vom absoluten Pfad "/images/resto.png" für Ihre Site geladen. Das Bilderverzeichnis sollte sich im Stammverzeichnis Ihrer Site befinden. Beispiel: http://www.example.com/images/resto.png

0
zdrsoft