Neden benim göreli resim yolu çalışması uygulamasını Tepki değil mi?

oy
1

Benim

Ben figüran olarak bir bileşeni haline göreli bir resim URL'si geçmesi burada bir uygulamayı tepki var ...

<TechListItem imgSrc=../assets/images/javascript.png itemName=JavaScript />

Ve prop src niteliği içine beslenir ...

const TechListItem = (props) => {
return (
    <ListGroup.Item className=listItem>
        <img className=listImage src={ props.imgSrc } alt={ props.itemName }/>
        <p className=itemName>{ props.itemName }</p>
    </ListGroup.Item>
);
}

Ben başka kaynaklardan mutlak yollarla aynı bileşenin diğer örneklerini test ettik ...

<TechListItem imgSrc=https://via.placeholder.com/75 itemName=React />

Ve onlar sadece iyi çalışır.

Sayfama-olurdu görüntü muayene ve görüntü adresini açarak denedim ( http: // localhost: 3000 / varlıklar / images / javascript.png ) Chrome'da, ama hiçbir şey gösterileri kadar. Ben ağ sekmede baktığımızda, bu görüntü için yanıt kodu ı boşaltma ve dev araçlardan önbelleği devre dışı bıraktıktan sonra sert yeniden denedim 304. söylüyor. Benim sayfa veya zaman yeni bir sekmede görüntüyü açmak ya bu bana 200 tepkisini alır, ama görüntü hala görünmüyor. Gerçekten buradan nereye de emin değil.

Oluştur 03/12/2019 saat 00:00
kaynak kullanıcı
Diğer dillerde...                            


1 cevaplar

oy
2

Böyle bir yol belki bir sonraki yaklaşımlardan birini denemelisiniz, çalışma zamanı içinde yok:

// import
import ImgSrc from '../assets/images/javascript.png';
<TechListItem imgSrc={ImgSrc}/>

// or require
<TechListItem imgSrc={require('../assets/images/javascript.png')}/>
Cevap 03/12/2019 saat 00:05
kaynak kullanıcı

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more