React lädt keine lokalen Bilder

Ich baue eine kleine Reaktions-App und meine lokalen Bilder werden nicht geladen. Bilder mögen placehold.it/200x200Lasten. Ich dachte, vielleicht könnte es etwas mit dem Server sein?

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

Wenn Sie Webpack verwenden, müssen Sie requireBilder erstellen, damit Webpack sie verarbeiten kann. Dies würde erklären, warum externe Bilder geladen werden, während interne nicht geladen werden. Stattdessen müssen <img src={"/images/resto.png"} />Sie <img src={require('/images/image-name.png')} />image-name.png durch den richtigen Bildnamen für jedes von ihnen ersetzen. Auf diese Weise kann Webpack das Quell-Img verarbeiten und ersetzen.

Ich habe mit dem Erstellen meiner App mit der Create -React-App begonnen (siehe Registerkarte "Neue App erstellen"). Die mitgelieferte README.md enthält das folgende 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 bei mir perfekt funktioniert. Hier ist ein Link zum Master-Dokument für diese README , der erklärt (Auszug):

... Sie können eine Datei direkt in ein JavaScript-Modul importieren. Dadurch wird Webpack angewiesen, diese Datei in das Bundle aufzunehmen. Im Gegensatz zu CSS-Importen erhalten Sie beim Importieren einer Datei einen Zeichenfolgenwert. Dieser Wert ist der endgültige Pfad, auf den Sie in Ihrem Code verweisen können, z. B. als src-Attribut eines Bildes oder als href eines Links zu einer PDF-Datei.

Um die Anzahl der Anforderungen an den Server zu verringern, wird beim Importieren von Bildern mit weniger als 10.000 Byte ein Daten-URI anstelle eines Pfads zurückgegeben. Dies gilt für die folgenden Dateierweiterungen: bmp, gif, jpg, jpeg und png ...

Ein anderer Weg zu tun:

Zuerst installieren Sie diese Module: url-loader,file-loader

Verwenden von npm: npm install --save-dev url-loader file-loader

Fügen Sie dies als Nächstes Ihrer Webpack-Konfiguration hinzu:

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

limit: Byte-Limit für Inline-Dateien als Daten-URL

Sie müssen beide Module installieren : url-loaderundfile-loader

Schließlich können Sie Folgendes tun:

<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

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

Eigentlich möchte ich einen Kommentar abgeben, bin aber noch nicht autorisiert. Deshalb gibt das vor, die nächste Antwort zu sein, obwohl 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 reibungslos, wenn man ein Bild hat, das man einfach einfügen kann. In meinem Fall ist das etwas komplexer: Ich muss mehrere Bilder darauf abbilden. Bisher habe ich nur folgende Möglichkeiten gefunden

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 Möglichkeiten gibt, diese Bilder zu verarbeiten. Es ist unnötig zu erwähnen, dass im Allgemeinen die Anzahl der Dateien, die buchstäblich importiert werden müssen, sehr groß sein kann und auch die Anzahl der Schlüssel im Objekt. (Das Objekt in diesem Code ist eindeutig mit Namen versehen - seine Schlüssel.) In meinem Fall haben die erforderlichen Verfahren nicht funktioniert. Die Lader haben während der Installation Fehler seltsamer Art erzeugt und keine Arbeitszeichen angezeigt. und erfordern an sich hat auch nicht funktioniert.

Ich wollte nur das Folgende hinterlassen, was die oben akzeptierte Antwort verbessert.

Zusätzlich zur akzeptierten Antwort können Sie Ihr eigenes Leben ein wenig vereinfachen, indem Sie einen aliasPfad in Webpack angeben, sodass Sie sich keine Sorgen machen müssen, wo sich das Bild relativ zu der Datei befindet, in der Sie sich gerade befinden. Siehe Beispiel unten ::

Webpack-Datei:

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

Verwenden:

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

Auch ich möchte die Antworten von @Hawkeye Parker und @Kiszuriwalilibori ergänzen:

Wie aus den Dokumenten hier hervorgeht , ist es normalerweise am besten, die Bilder nach Bedarf zu importieren.

Ich musste jedoch viele Dateien dynamisch laden, was dazu führte, dass ich die Bilder in den öffentlichen Ordner legte ( ebenfalls in der README-Datei angegeben ), da in der folgenden Dokumentation empfohlen wurde:

Normalerweise empfehlen wir den Import von Stylesheets, Bildern und Schriftarten aus JavaScript. Der öffentliche Ordner ist nützlich, um eine Reihe weniger häufiger Fälle zu umgehen:

• 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 schritt.js außerhalb des gebündelten Codes einfügen.
• Einige Bibliotheken sind möglicherweise nicht mit Webpack kompatibel, und Sie haben keine andere Möglichkeit, als sie als Tag einzuschließen.

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

Ich entwickle ein Projekt, das SSR verwendet, und jetzt möchte ich meine Lösung anhand einiger Antworten hier teilen.

Mein Ziel ist es, ein Bild vorab zu laden, um es anzuzeigen, wenn die Internetverbindung offline ist. (Es ist vielleicht nicht die beste Vorgehensweise, aber da es für mich funktioniert, ist das vorerst in Ordnung.) Zu Ihrer Information, ich verwende auch ReactHooks in diesem Projekt.

  useEffect(() => {
    // preload image for offline network
    const ErrorFailedImg = require('../../../../assets/images/error-review-failed.jpg');
    if (typeof window !== 'undefined') {
      new Image().src = ErrorFailedImg;
    }
  }, []);

Um das Bild zu verwenden, schreibe ich es so

<img src="/assets/images/error-review-failed.jpg" />

Versuchen Sie, den Code in server.js in - zu ändern

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

Manchmal können Sie statt in Ihrem Bildspeicherort / src: try eingeben

./assets/images/picture.jpg

anstatt

../assets/images/picture.jpg

src={"/images/resto.png"}

Wenn Sie das src-Attribut auf diese Weise verwenden, wird Ihr Bild aus dem 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

Hier ist, was für mich funktioniert hat. Lassen Sie uns zunächst das Problem verstehen. Sie können keine Variable als Argument für die Anforderung verwenden. Webpack muss wissen, welche Dateien zur Kompilierungszeit gebündelt werden müssen.

Als ich den Fehler bekam, dachte ich, dass er möglicherweise mit dem Pfadproblem zusammenhängt, wie in absolut oder relativ. Daher habe ich einen fest codierten Wert übergeben, der wie folgt erforderlich ist: <img src = {require ("../ assets / images / photosnap.svg")} alt = "" />. Es hat gut funktioniert. Aber in meinem Fall ist der Wert eine Variable, die von Requisiten stammt. Ich habe versucht, eine String-Literal-Variable zu übergeben, wie einige vorgeschlagen haben. Es hat nicht funktioniert. Außerdem habe ich versucht, eine lokale Methode mit switch case für alle 10 Werte zu definieren (ich wusste, dass dies nicht die beste Lösung ist, aber ich wollte nur, dass sie irgendwie funktioniert). Auch das hat nicht funktioniert. Dann habe ich erfahren, dass wir KEINE Variablen an die Anforderung übergeben können.

Um dieses Problem zu umgehen, habe ich die Daten in der Datei data.json so geändert, dass sie nur auf den Namen meines Bildes beschränkt sind. Dieser Bildname, der von den Requisiten als String-Literal stammt. Ich habe es wie folgt mit dem fest codierten Wert verkettet:

import React from "react";

function JobCard(props) {  

  const { logo } = props;
  
  return (
      <div className="jobCards">
          <img src={require(`../assets/images/${logo}`)} alt="" /> 
      </div>
    )
} 
  

Der im Logo enthaltene tatsächliche Wert stammt aus der Datei data.json und verweist auf einen Bildnamen wie photosnap.svg.

Der beste Weg, um lokale Bilder in Reaktion zu laden, ist wie folgt

Bewahren Sie beispielsweise alle Ihre Bilder (oder Elemente wie Videos, Schriftarten) wie unten gezeigt im öffentlichen Ordner auf.

Schreiben Sie einfach, <img src='/assets/images/Call.svg' />um von einer Ihrer Reaktionskomponenten auf das Call.svg-Bild zuzugreifen

Hinweis: Wenn Sie Ihre Assets im öffentlichen Ordner belassen, können Sie von überall im Projekt darauf zugreifen, indem Sie einfach '/ path_to_image' angeben und keine Pfadüberquerung '../../' wie diese benötigen

Sie müssen das Bild zuerst importieren und dann verwenden. Es hat bei mir funktioniert.

import image from '../image.png'

const Header = () => {
   return (
     <img src={image} alt='image' />
   )
}