React JS'de koşullu oluşturma ve görüntü yolu

Question

Bir anı gerçekten anlamıyorum. Diyelim ki verileri koşullu olarak şu şekilde işleyen bir bileşenim var:

<div>
{isLoading ? <img src="../pathname/img.jpg" alt="loading" /> : <Page />}
</div>

Görüntü bu şekilde işlenmez, bozuk bir dosya simgesi gösterir. Bununla birlikte, aynı görüntüyü içe aktarırsam gayet iyi çalışıyor:

import loadingImage from "../pathname/img.jpg"
<div>
{isLoading ? <img src={loadingImage} alt="loading" /> : <Page />}
</div>

Ben kullanıyorum npm startve editörüm VS Code. Bunu içe aktarmanın nedeninin ne olduğunu ve srcyol aynı olsa bile sadece bir yol adı sağlamak olmadığını biliyor musunuz ? Sağladığım yol ve dosya adı ilk örnekte% 100 doğruydu.

Answer 1

Bunun nedeni resminizin muhtemelen publicklasörün içinde olmamasıdır .

Varlıkları ortak klasöre ekleyebilir ve ardından ona erişebilirsiniz.

Örneğin, aşağıdaki kod için, pathnameklasörün içinde img.jpg ile bir klasöre ihtiyacınız olacak public.

<img src="../pathname/img.jpg" alt="loading" />

Ancak bunu yapmanın en iyi yolu JavaScript dosyalarında içe aktarmayı kullanmaktır. Bu mekanizma bir dizi fayda sağlar:

• Ekstra ağ isteklerini önlemek için komut dosyaları ve stil sayfaları küçültülür ve bir araya getirilir.
• Dosyalar pakete dahildir
• Eksik dosyalar, kullanıcılarınız için 404 hatası yerine derleme hatalarına neden olur.
• Sonuç dosya adları içerik karmaları içerir, böylece tarayıcıların eski sürümlerini önbelleğe alması konusunda endişelenmenize gerek kalmaz.

İle importsayfa işlendiğinde, sen görüntüde böyle sometinhg göreceksiniz: src="/static/media/img.xxxxx.jpg". Bunun nedeni, içe aktarmanın kullanılması web paketine bu dosyayı pakete dahil etmesini söylemesidir.

Burada daha fazlasını kontrol edebilirsiniz - resim-yazı-tipi-ve-dosya-ekleme ve burada -public-klasörü-kullanma

Answer 2

Kıvrımlı parantezleri özlediniz. Bu çalışacak:

<div>
  {isLoading ? <img src={'../pathname/img.jpg'} alt='loading' /> : <Page />}
</div>