React nie wczytuje lokalnych obrazów

Tworzę małą aplikację reagowania, a moje obrazy lokalne się nie ładują. Obrazy jak placehold.it/200x200ładunki. Pomyślałem, że może to może być coś z serwerem?

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

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

Korzystając z Webpacka, potrzebujesz requireobrazów, aby Webpack mógł je przetworzyć, co wyjaśniałoby, dlaczego obrazy zewnętrzne ładują się, a wewnętrzne nie, więc zamiast tego <img src={"/images/resto.png"} />musisz <img src={require('/images/image-name.png')} />zastąpić image-name.png poprawną nazwą obrazu dla każdego z nich. W ten sposób Webpack może przetwarzać i zastępować źródłowy img.

Zacząłem budować swoją aplikację za pomocą aplikacji create-react-app (zobacz zakładkę „Utwórz nową aplikację”). Dołączony plik README.md zawiera następujący przykład:

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;

To zadziałało idealnie dla mnie. Oto link do głównego dokumentu tego README , który wyjaśnia (fragment):

... Możesz zaimportować plik bezpośrednio w module JavaScript. Informuje to Webpack o dołączeniu tego pliku do pakietu. W przeciwieństwie do importu CSS, importowanie pliku daje wartość ciągu. Ta wartość jest ostateczną ścieżką, do której możesz się odwołać w swoim kodzie, np. Jako atrybut src obrazu lub href linku do pliku PDF.

Aby zmniejszyć liczbę żądań kierowanych do serwera, importowanie obrazów o rozmiarze mniejszym niż 10 000 bajtów zwraca identyfikator URI danych zamiast ścieżki. Dotyczy to następujących rozszerzeń plików: bmp, gif, jpg, jpeg i png ...

Inny sposób:

Najpierw należy zainstalować te moduły: url-loader,file-loader

Korzystanie z npm: npm install --save-dev url-loader file-loader

Następnie dodaj to do konfiguracji Webpacka:

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

limit: Limit bajtów do plików wbudowanych jako adres URL danych

Musisz zainstalować oba moduły: url-loaderifile-loader

Wreszcie możesz:

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

Możesz dokładniej zbadać te programy ładujące tutaj:

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

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

Właściwie chciałbym skomentować, ale nie mam jeszcze upoważnienia. To dlatego udaje, że jest następną odpowiedzią, podczas gdy tak nie jest.

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" />;

Chciałbym kontynuować tę drogę. Działa to płynnie, gdy ma się zdjęcie, które można po prostu wstawić. W moim przypadku jest to nieco bardziej złożone: muszę to zmapować kilka zdjęć. Jak dotąd jedyny możliwy sposób, aby to zrobić, jest następujący

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]}/> 

Więc moje pytanie brzmi, czy istnieją prostsze sposoby przetwarzania tych obrazów? Nie trzeba dodawać, że w bardziej ogólnym przypadku liczba plików, które muszą być dosłownie zaimportowane, może być ogromna, podobnie jak liczba kluczy w obiekcie. (Obiekt w tym kodzie zawiera wyraźne odniesienie do nazw-jego kluczy) W moim przypadku procedury związane z wymaganiami nie zadziałały - programy ładujące generowały dziwne błędy podczas instalacji i nie wykazywały śladów działania; i wymaganie samo z siebie też nie zadziałało.

Chciałem tylko zostawić to, co uwydatnia zaakceptowaną powyżej odpowiedź.

Oprócz zaakceptowanej odpowiedzi możesz nieco ułatwić sobie życie, określając aliasścieżkę w programie Webpack, więc nie musisz się martwić, gdzie znajduje się obraz w stosunku do pliku, w którym aktualnie się znajdujesz. Zobacz przykład poniżej :

Plik Webpack:

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

Posługiwać się:

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

Ja również chciałbym dodać do odpowiedzi @Hawkeye Parker i @Kiszuriwalilibori:

Jak odnotowano od docs tutaj , to zazwyczaj najlepiej importować obrazy, ile potrzeba.

Potrzebowałem jednak do dynamicznego ładowania wielu plików, co skłoniło mnie do umieszczenia obrazów w folderze publicznym ( również podanym w README ), z powodu poniższej rekomendacji z dokumentacji:

Zwykle zalecamy importowanie arkuszy stylów, obrazów i czcionek z JavaScript. Folder publiczny jest przydatny jako obejście wielu mniej typowych przypadków:

• Potrzebujesz pliku o określonej nazwie w danych wyjściowych kompilacji, na przykład manifest.webmanifest.
• Masz tysiące obrazów i musisz dynamicznie odnosić się do ich ścieżek.
• Chcesz dołączyć mały skrypt, taki jak pace.js, poza dołączonym kodem.
• Niektóre biblioteki mogą być niekompatybilne z Webpack i nie masz innego wyjścia, jak tylko dołączyć ją jako tag.

Mam nadzieję, że to pomoże komuś innemu! Zostaw komentarz, jeśli muszę to wyjaśnić.

Rozwijam projekt wykorzystujący SSR i teraz chcę podzielić się moim rozwiązaniem w oparciu o kilka odpowiedzi tutaj.

Moim celem jest wstępne załadowanie obrazu, aby pokazać go w trybie offline. (Może to nie jest najlepsza praktyka, ale ponieważ to działa, na razie jest w porządku) FYI, również używam ReactHooks w tym projekcie.

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

Aby użyć obrazu, piszę to w ten sposób

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

Spróbuj zmienić kod w server.js na -

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

Czasami możesz wpisać zamiast w lokalizacji obrazu / src: try

./assets/images/picture.jpg

zamiast

../assets/images/picture.jpg

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

Użycie atrybutu src w ten sposób oznacza, że ​​obraz zostanie załadowany z bezwzględnej ścieżki „/images/resto.png” Twojej witryny. Katalog obrazów powinien znajdować się w katalogu głównym witryny. Przykład: http://www.example.com/images/resto.png

Oto, co zadziałało dla mnie. Najpierw zrozumiemy problem. Nie możesz użyć zmiennej jako argumentu do wymagania. Webpack musi wiedzieć, jakie pliki mają być pakowane w czasie kompilacji.

Kiedy otrzymałem błąd, pomyślałem, że może to być związane z problemem ścieżki, tak jak w przypadku wartości bezwzględnej i względnej. Więc przekazałem zakodowaną wartość, aby wymagać, jak poniżej: <img src = {require ("../ asset / images / photosnap.svg")} alt = "" />. Działało dobrze. Ale w moim przypadku wartość jest zmienną pochodzącą z rekwizytów. Próbowałem przekazać zmienną literału ciągu, jak niektórzy sugerowali. To nie działało. Próbowałem też zdefiniować metodę lokalną za pomocą przełącznika dla wszystkich 10 wartości (wiedziałem, że to nie jest najlepsze rozwiązanie, ale po prostu chciałem, aby jakoś działało). To też nie zadziałało. Wtedy dowiedziałem się, że NIE możemy przekazać zmiennej do żądania.

Aby obejść ten problem, zmodyfikowałem dane w pliku data.json, aby ograniczyć je tylko do nazwy mojego obrazu. Ta nazwa obrazu, która pochodzi z rekwizytów jako literał String. Połączyłem go z zakodowaną wartością, na przykład:

import React from "react";

function JobCard(props) {  

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

Rzeczywista wartość zawarta w logo pochodziłaby z pliku data.json i odnosiłaby się do nazwy obrazu, na przykład photosnap.svg.

Najlepszy sposób na załadowanie lokalnych obrazów w reakcji jest następujący

Na przykład zachowaj wszystkie swoje obrazy (lub wszelkie zasoby, takie jak filmy, czcionki) w folderze publicznym, jak pokazano poniżej.

Po prostu napisz, <img src='/assets/images/Call.svg' />aby uzyskać dostęp do obrazu Call.svg z dowolnego komponentu reagowania

Uwaga: przechowywanie zasobów w folderze publicznym zapewnia, że ​​można uzyskać do nich dostęp z dowolnego miejsca w projekcie, po prostu podając „/ path_to_image” i nie ma potrzeby przechodzenia przez ścieżkę „../../” w ten sposób

musisz najpierw zaimportować obraz, a następnie go użyć. U mnie to zadziałało.

import image from '../image.png'

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