React, yerel görüntüleri yüklemeyecek

Küçük bir tepki uygulaması oluşturuyorum ve yerel resimlerim yüklenmiyor. placehold.it/200x200Yükler gibi görüntüler . Sunucuyla ilgili bir şey olabileceğini düşündüm.

İşte benim 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')
);

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

WebPack kullanırken yapmanız gerekenler requirearasında neden harici resimler yük ise iç yapamaz, bunun yerine açıklıyor, WebPack bunları işlemek için sırayla görüntüleri <img src={"/images/resto.png"} />kullanmak gerekir <img src={require('/images/image-name.png')} />bunların her biri için doğru resim adıyla görüntü name.png değiştirilmesi. Bu şekilde Webpack, kaynak img dosyasını işleyebilir ve değiştirebilir.

Uygulamamı oluştur-react- app ile oluşturmaya başladım (bkz. "Yeni Bir Uygulama Oluşturma" sekmesi). Onunla birlikte gelen README.md şu örneği verir:

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;

Bu benim için mükemmel çalıştı. İşte söz konusu README için ana dokümana bağlantı (alıntı):

... Bir dosyayı doğrudan bir JavaScript modülüne aktarabilirsiniz. Bu, Webpack'e bu dosyayı pakete dahil etmesini söyler. CSS içe aktarmalarından farklı olarak, bir dosyayı içe aktarmak size bir dize değeri verir. Bu değer, kodunuzda başvurabileceğiniz son yoldur, örneğin bir görüntünün src niteliği veya bir PDF bağlantısının href'i olarak.

Sunucuya gönderilen isteklerin sayısını azaltmak için, 10.000 bayttan az olan görüntüleri içe aktarmak, yol yerine bir veri URI'si döndürür. Bu, aşağıdaki dosya uzantıları için geçerlidir: bmp, gif, jpg, jpeg ve png ...

Yapmanın başka bir yolu:

İlk olarak, bu modüller yükleyin: url-loader,file-loader

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

Sonra, bunu Webpack yapılandırmanıza ekleyin:

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

limit: Veri URL'si olarak satır içi dosyalar için bayt sınırı

Her iki modülü de kurmanız gerekiyor : url-loadervefile-loader

Son olarak şunları yapabilirsiniz:

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

Bu yükleyicileri burada daha ayrıntılı inceleyebilirsiniz:

url yükleyici: https://www.npmjs.com/package/url-loader

dosya yükleyici: https://www.npmjs.com/package/file-loader

Aslında yorum yapmak istiyorum ama henüz yetkim yok. Bu yüzden, öyle değilken bir sonraki cevap bu gibi davranıyor.

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

Bu yola devam etmek isterim. Bu, birinin basit bir ekleyebileceği bir resim olduğunda sorunsuz çalışır. Benim durumumda bu biraz daha karmaşık: Birkaç resmi eşleştirmem gerekiyor. Şimdiye kadar bulduğum bunu yapmanın tek uygulanabilir yolu aşağıdaki gibidir

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

Öyleyse sorum, bu görüntüleri işlemenin daha basit yolları olup olmadığıdır. Daha genel bir durumda, kelimenin tam anlamıyla içe aktarılması gereken dosya sayısının çok büyük olabileceğini ve nesnedeki anahtar sayısının da olabileceğini söylemeye gerek yok. (Bu koddaki nesne, isimlerle-anahtarlarıyla açıkça başvurmakla ilgilidir) Benim durumumda, gereksinimle ilgili prosedürler işe yaramadı - yükleyiciler, kurulum sırasında garip türden hatalar üretti ve hiçbir çalışma işareti göstermedi; ve gerek kendi başına ne işe yaramadı.

Yukarıda kabul edilen cevabı güçlendiren aşağıdakileri bırakmak istedim.

Kabul edilen cevaba ek olarak, aliasWebpack'te bir yol belirleyerek kendi hayatınızı biraz daha kolaylaştırabilirsiniz , böylece şu anda bulunduğunuz dosyaya göre görüntünün nerede bulunduğu konusunda endişelenmenize gerek kalmaz. Lütfen aşağıdaki örneğe bakın :

Webpack dosyası:

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

kullanın:

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

Ben de @Hawkeye Parker ve @Kiszuriwalilibori'nin cevaplarına eklemek istiyorum:

Buradaki belgelerden de belirtildiği gibi, genellikle en iyisi görüntüleri gerektiği gibi içe aktarmaktır.

Ancak, dinamik olarak yüklenecek birçok dosyaya ihtiyacım vardı , bu da belgeleri genel klasöre koymamı sağladı ( ayrıca README'de de belirtilmiştir ), çünkü aşağıdaki dokümantasyondaki tavsiye:

Normalde JavaScript'ten stil sayfalarını, resimleri ve yazı tiplerini içe aktarmanızı öneririz. Ortak klasör, daha az yaygın birkaç durum için bir geçici çözüm olarak kullanışlıdır:

• Derleme çıktısında manifest.webmanifest gibi belirli bir ada sahip bir dosyaya ihtiyacınız var.
• Binlerce görüntünüz var ve bunların yollarına dinamik olarak başvurmanız gerekiyor.
• Paketlenmiş kodun dışına pace.js gibi küçük bir komut dosyası eklemek istiyorsunuz.
• Bazı kitaplıklar Webpack ile uyumsuz olabilir ve bunu bir etiket olarak eklemekten başka seçeneğiniz yoktur.

Umarım bu başka birine yardımcı olur! Bunlardan herhangi birini temizlemem gerekirse bana bir yorum bırakın.

SSR kullanan bir proje geliştiriyorum ve şimdi burada bazı cevaplara dayanarak çözümümü paylaşmak istiyorum.

Hedeflerim, internet bağlantısı çevrimdışı olduğunda göstermek için bir resmi önceden yüklemek. (En iyi uygulama olmayabilir, ancak benim için işe yaradığı için şimdilik sorun değil) Bilginize, bu projede ReactHooks da kullanıyorum.

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

Görseli kullanmak için böyle yazıyorum

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

Server.js'deki kodu - olarak değiştirmeyi deneyin

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

Bazen resim konumunuz / src yerine girebilirsiniz: deneyin

./assets/images/picture.jpg

onun yerine

../assets/images/picture.jpg

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

Src özniteliğinin bu şekilde kullanılması, resminizin siteniz için mutlak yoldan "/images/resto.png" yükleneceği anlamına gelir. Görseller dizini sitenizin kök dizininde yer almalıdır. Örnek: http://www.example.com/images/resto.png

İşte benim için işe yarayan şey. Önce sorunu anlayalım. Bir değişkeni zorunlu kılmak için bağımsız değişken olarak kullanamazsınız. Webpack'in derleme sırasında hangi dosyaların paketleneceğini bilmesi gerekir.

Hatayı aldığımda, mutlak ve göreceli olduğu gibi yol sorunuyla ilgili olabileceğini düşündüm. Bu yüzden, aşağıdaki gibi zorunlu kılınmış bir değer geçtim: <img src = {require ("../ assets / images / photosnap.svg")} alt = "" />. İyi çalışıyordu. Ama benim durumumda değer, proplardan gelen bir değişkendir. Bazılarının önerdiği gibi bir dize değişmez değişkeni geçirmeye çalıştım. İşe yaramadı. Ayrıca 10 değerin tümü için anahtar durumu kullanarak yerel bir yöntem tanımlamaya çalıştım (bunun en iyi çözüm olmadığını biliyordum, ancak bir şekilde çalışmasını istedim). Bu da işe yaramadı. Sonra değişkeni ihtiyaca aktaramayacağımızı öğrendim.

Geçici bir çözüm olarak, data.json dosyasındaki verileri yalnızca resmimin adıyla sınırlandırmak için değiştirdim. Props'dan bir String değişmezi olarak gelen bu görüntü adı. Bunu sabit kodlanmış değere birleştirdim, şöyle:

import React from "react";

function JobCard(props) {  

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

Logoda bulunan gerçek değer data.json dosyasından gelir ve photosnap.svg gibi bazı resim adlarına atıfta bulunur.

React'te yerel görüntüleri yüklemenin en iyi yolu aşağıdaki gibidir

Örneğin, tüm resimlerinizi (veya videolar, yazı tipleri gibi varlıkları) aşağıda gösterildiği gibi ortak klasörde tutun.

<img src='/assets/images/Call.svg' />Herhangi bir tepki bileşeninizden Call.svg görüntüsüne erişmek için yazmanız yeterlidir

Not: Varlıklarınızı ortak klasörde tutmak, sadece '/ yol_görüntü' vererek ve bunun gibi herhangi bir yol geçişine '../../' gerek kalmadan projenin herhangi bir yerinden erişebilmenizi sağlar.

önce görüntüyü içe aktarmalı sonra kullanmalısınız. Benim için çalıştı.

import image from '../image.png'

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