React projemdeki resimlerimle ilgili bazı problemlerim var. Aslında, src özniteliğine giden göreceli yolun dosya mimarisi üzerine inşa edildiğini düşünmüşümdür hep

İşte benim dosya mimarim:

components
    file1.jsx
    file2.jsx
    file3.jsx
container
img
js 
... 

Ancak yolun url üzerine kurulduğunu fark ettim. Bileşenimden birinde (örneğin file1.jsx'e) şuna sahibim:

localhost/details/2
<img src="../img/myImage.png" /> -> works

localhost/details/2/id
<img src="../img/myImage.png" /> -> doesn't work, images are not displayed

Bu sorunu nasıl çözmek mümkün? React-router tarafından işlenen her türlü rotada, tüm görüntülerin aynı yolla görüntülenmesini istiyorum.

Dosya sistemine değil, mevcut url'ye göre göreli bir url kullanıyorsunuz. Bunu mutlak URL'ler kullanarak çözebilirsiniz

<img src ="http://localhost:3000/details/img/myImage.png" />

Ancak, www.my-domain.bike veya başka bir siteye dağıtım yaptığınızda bu pek iyi değil. Sitenin kök dizinine göre bir url kullanmak daha iyidir

<img src="/details/img/myImage.png" />

Gelen create-react-appgörüntüler için göreli yollar işe görünmüyor. Bunun yerine bir görüntüyü içe aktarabilirsiniz:

import logo from './logo.png' // relative path to image 

class Nav extends Component { 
    render() { 
        return ( 
            <img src={logo} alt={"logo"}/> 
        )  
    }
}

Projenizi oluşturmak için create-react-app kullandıysanız, ortak klasörünüze erişilebilir. Bu nedenle imageklasörünüzü ortak klasörün içine eklemeniz gerekir .

kamu / images /

<img src="/images/logo.png" />

İle create-react-apporada kamu klasörü (ile index.html ...). "MyImage.png" dosyanızı oraya yerleştirirseniz, diyelim ki img alt klasörünün altına, sonra bunlara şu şekilde erişebilirsiniz:

<img src={window.location.origin + '/img/myImage.png'} />

1. Src (/ src / images) içinde bir resim klasörü oluşturun ve resminizi içinde tutun. Ardından bu görüntüyü bileşeninize aktarın (göreceli yolunuzu kullanın). Aşağıdaki gibi-

   import imageSrc from './images/image-name.jpg';

   Ve sonra bileşeninizde.

   <img title="my-img" src={imageSrc} alt="my-img" />

2. Diğer bir yol da görüntüleri ortak klasörde tutmak ve göreli yol kullanarak içe aktarmaktır. Bunun için ortak klasörde bir görüntü klasörü oluşturun ve görüntünüzü içinde saklayın. Ve sonra bileşeninizde aşağıdaki gibi kullanın.

   <img title="my-img" src='/images/my-image.jpg' alt="my-img" />

   Her iki yöntem de işe yarar, ancak ilki önerilir çünkü daha temiz yolu ve görüntüleri, derleme sırasında web paketi tarafından işlenir.

benim durumumda aşağıdaki kod da çalışıyor.

<img src={require('../logo.png')} alt="logo" className="brand-logo"/>

Bazı eski cevaplar işe yaramıyor, diğerleri iyi ama özetle temayı açıklamıyor:

Görüntü 'genel' dizindeyse

Misal: \public\charts\a.png

Html olarak:

<img id="imglogo" src="/charts/logo.svg" />

JavaScript'te:

Dinamik olarak yeni img için görüntü oluşturun:

var img1 = document.createElement("img");  
img1.src = 'charts/a.png';  

Resmi dinamik olarak "img1" kimliğine sahip mevcut img'ye ayarlayın:

document.getElementById('img1').src = 'charts/a.png';

Görüntü 'src' dizinindeyse:

Misal: \src\logo.svg

JavaScript'te:

import logo from './logo.svg';  
img1.src = logo;  

Jsx olarak:

<img src={logo} /> 

Ekleme dosya yükleyici UÖM'sini şöyle resmi kullanım talimatı başına webpack.config.js için:

config.module.rules.push(
    {
        test: /\.(png|jpg|gif)$/,
        use: [
            {
                loader: 'file-loader',
                options: {}
            }
        ]
    }
);

benim için çalıştı.

Bileşeninizdeki Görüntüleri İçe Aktarın

import RecentProjectImage_3 from '../../asset/image/recent-projects/latest_news_3.jpg'

Ve resim src = {RecentProjectImage_3} üzerindeki resim adını bir nesne olarak çağırın

 <Img src={RecentProjectImage_3} alt="" />

Bir arkadaşım bunu nasıl yapacağımı şu şekilde gösterdi:

"./", görüntüyü isteyen dosya (örneğin, "example.js") klasör ağacı yapısı içinde "görüntüler" klasörüyle aynı seviyede olduğunda çalışır.

Logoyu ortak klasörünüze örneğin public / img / logo.png altına yerleştirin ve ardından ortak klasöre% PUBLIC_URL% olarak bakın:

<img src="%PUBLIC_URL%/img/logo.png"/>

Yukarıdaki% PUBLIC_URL% kullanımı public, oluşturma sırasında klasörün URL'si ile değiştirilecektir . publicHTML'den yalnızca klasör içindeki dosyalara başvurulabilir.

"/İmg/logo.png" veya "logo.png" nin aksine, "% PUBLIC_URL% / img / logo.png" hem istemci tarafı yönlendirmesi hem de kök olmayan genel URL ile doğru şekilde çalışacaktır. Kök olmayan bir genel URL'yi çalıştırarak nasıl yapılandıracağınızı öğrenin npm run build.