React tidak akan memuat gambar lokal

Saya membuat aplikasi react kecil dan gambar lokal saya tidak bisa dimuat. Gambar seperti placehold.it/200x200memuat. Saya pikir mungkin itu bisa menjadi sesuatu dengan server?

Ini adalah App.js saya

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

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

Saat menggunakan Webpack, Anda memerlukan requiregambar agar Webpack dapat memprosesnya, yang akan menjelaskan mengapa gambar eksternal dimuat sementara internal tidak, jadi <img src={"/images/resto.png"} />Anda perlu <img src={require('/images/image-name.png')} />mengganti image-name.png dengan nama gambar yang benar untuk masing-masing gambar. Dengan begitu, Webpack dapat memproses dan mengganti img sumber.

Saya mulai membuat aplikasi saya dengan create-react-app (lihat tab "Membuat Aplikasi Baru"). README.md yang menyertainya memberikan contoh ini:

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;

Ini bekerja dengan sempurna untuk saya. Ini a tautan ke dokumen master untuk README itu , yang menjelaskan (kutipan):

... Anda dapat mengimpor file langsung di modul JavaScript. Ini memberi tahu Webpack untuk menyertakan file itu dalam bundel. Tidak seperti impor CSS, mengimpor file memberi Anda nilai string. Nilai ini adalah jalur terakhir yang dapat Anda rujuk dalam kode Anda, misalnya sebagai atribut src dari sebuah gambar atau href dari tautan ke PDF.

Untuk mengurangi jumlah permintaan ke server, mengimpor gambar yang berukuran kurang dari 10.000 byte akan menampilkan URI data, bukan jalur. Ini berlaku untuk ekstensi file berikut: bmp, gif, jpg, jpeg, dan png ...

Cara lain untuk melakukannya:

Pertama, instal modul ini: url-loader ,file-loader

Menggunakan npm: npm install --save-dev url-loader file-loader

Selanjutnya, tambahkan ini ke konfigurasi Webpack Anda:

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

limit: Batas byte ke file sebaris sebagai URL Data

Anda perlu menginstal kedua modul:url-loader danfile-loader

Terakhir, Anda dapat melakukan:

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

Anda dapat menyelidiki loader ini lebih lanjut di sini:

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

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

Sebenarnya saya ingin memberi komentar, tapi saya belum berwenang. Itulah mengapa itu berpura-pura menjadi jawaban berikutnya padahal tidak.

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

Saya ingin melanjutkan jalan itu. Itu bekerja dengan lancar ketika seseorang memiliki gambar yang dapat disisipkan dengan mudah. Dalam kasus saya, itu sedikit lebih kompleks: Saya harus memetakan beberapa gambar. Sejauh ini satu-satunya cara yang bisa diterapkan untuk melakukan ini yang saya temukan adalah sebagai berikut

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

Jadi, pertanyaan saya adalah apakah ada cara yang lebih sederhana untuk memproses gambar ini? Tak perlu dikatakan bahwa dalam kasus yang lebih umum, jumlah file yang harus diimpor secara harfiah bisa sangat besar dan jumlah kunci dalam objek juga. (Objek dalam kode itu terlibat secara jelas untuk merujuk dengan nama -kuncinya) Dalam kasus saya, prosedur yang berhubungan dengan persyaratan tidak berfungsi - loader menghasilkan kesalahan yang aneh selama instalasi dan tidak menunjukkan tanda berfungsi; dan membutuhkan dengan sendirinya tidak berhasil.

Saya hanya ingin meninggalkan yang berikut ini yang meningkatkan jawaban yang diterima di atas.

Selain jawaban yang diterima, Anda dapat membuat hidup Anda sedikit lebih mudah dengan menentukan alias jalur di Webpack, jadi Anda tidak perlu khawatir di mana letak gambar relatif terhadap file Anda saat ini. Lihat contoh di bawah :

File webpack:

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

Menggunakan:

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

Saya juga ingin menambahkan jawaban dari @Hkeye Parker dan @Kiszuriwalilibori:

Seperti yang dicatat dari dokumen di sini , biasanya yang terbaik adalah mengimpor gambar sesuai kebutuhan.

Namun, saya membutuhkan banyak file untuk dimuat secara dinamis, yang membuat saya meletakkan gambar di folder publik ( juga dinyatakan dalam README ), karena rekomendasi di bawah ini dari dokumentasi:

Biasanya kami merekomendasikan mengimpor lembar gaya, gambar, dan font dari JavaScript. Folder publik berguna sebagai solusi untuk sejumlah kasus yang kurang umum:

• Anda memerlukan file dengan nama tertentu dalam keluaran build, seperti manifest.webmanifest.
• Anda memiliki ribuan gambar dan perlu mengacu pada jalurnya secara dinamis.
• Anda ingin memasukkan skrip kecil seperti pace.js di luar kode yang dibundel.
• Beberapa pustaka mungkin tidak kompatibel dengan Webpack dan Anda tidak memiliki pilihan lain selain memasukkannya sebagai tag.

Semoga itu bisa membantu orang lain! Tinggalkan saya komentar jika saya perlu menjelaskan semua itu.

Saya sedang mengembangkan proyek yang menggunakan SSR dan sekarang saya ingin membagikan solusi saya berdasarkan beberapa jawaban di sini.

Tujuan saya adalah memuat gambar untuk ditampilkan saat koneksi internet offline. (Ini mungkin bukan praktik terbaik, tetapi karena ini berhasil untuk saya, tidak apa-apa untuk saat ini) FYI, saya juga menggunakan ReactHooks dalam proyek ini.

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

Untuk menggunakan gambar, saya menulisnya seperti ini

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

Coba ubah kode di server.js menjadi -

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

Kadang-kadang Anda dapat masuk, bukan di lokasi gambar / src: coba

./assets/images/picture.jpg

dari pada

../assets/images/picture.jpg

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

Menggunakan atribut src dengan cara ini berarti, gambar Anda akan dimuat dari jalur absolut "/images/resto.png" untuk situs Anda. Direktori gambar harus ditempatkan di root situs Anda. Contoh: http://www.example.com/images/resto.png

Inilah yang berhasil untuk saya. Pertama, mari kita pahami masalahnya. Anda tidak dapat menggunakan variabel sebagai argumen yang diperlukan. Webpack perlu mengetahui file apa yang akan dipaketkan pada waktu kompilasi.

Ketika saya mendapat kesalahan, saya pikir itu mungkin terkait dengan masalah jalur seperti pada absolut vs relatif. Jadi saya memberikan nilai hard code untuk diminta seperti di bawah ini: <img src = {require ("../ assets / images / photosnap.svg")} alt = "" />. Itu bekerja dengan baik. Tetapi dalam kasus saya, nilainya adalah variabel yang berasal dari alat peraga. Saya mencoba melewatkan variabel literal string seperti yang disarankan beberapa. Tidak bekerja. Saya juga mencoba menentukan metode lokal menggunakan kasus sakelar untuk semua 10 nilai (saya tahu itu bukan solusi terbaik, tetapi saya hanya ingin itu berfungsi entah bagaimana). Itu juga tidak berhasil. Kemudian saya mengetahui bahwa kita TIDAK dapat meneruskan variabel ke memerlukan.

Sebagai solusinya, saya telah memodifikasi data dalam file data.json untuk membatasinya hanya pada nama gambar saya. Nama gambar ini yang berasal dari props sebagai String literal. Saya menggabungkannya ke nilai kode keras, seperti:

import React from "react";

function JobCard(props) {  

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

Nilai sebenarnya yang terkandung dalam logo akan berasal dari file data.json dan akan mengacu pada beberapa nama gambar seperti photosnap.svg.

Cara terbaik untuk memuat gambar lokal di react adalah sebagai berikut

Misalnya, Simpan semua gambar Anda (atau aset apa pun seperti video, font) di folder publik seperti yang ditunjukkan di bawah ini.

Cukup tulis <img src='/assets/images/Call.svg' />untuk mengakses gambar Call.svg dari salah satu komponen react Anda

Catatan: Menjaga aset Anda di folder publik memastikan bahwa, Anda dapat mengaksesnya dari mana saja dari proyek, hanya dengan memberikan '/ path_to_image' dan tidak perlu jalur traversal '../../' seperti ini

Anda harus mengimpor gambar terlebih dahulu lalu menggunakannya. Itu berhasil untuk saya.

import image from '../image.png'

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