Dlaczego nie będzie względna ścieżka obraz praca w moim React aplikację?

głosy
1

Moja

Mam React aplikację którym mijam względny URL obrazu do składnika jako rekwizyt ...

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

A prop doprowadza się do atrybutu src ...

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

Przetestowałem na inne instancje tego samego komponentu z bezwzględnych ścieżek z innych źródeł ...

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

I działają dobrze.

Mam sprawdzony obraz niedoszły w moją stronę i próbował otwierając adres obrazu ( http: // localhost: 3000 / assets / images / javascript.png ) w Chrome, ale nic nie pokaże. Kiedy patrzę na karcie sieciowej, to mówi, że kod odpowiedzi dla obrazu jest 304. Próbowałem opróżnianie i ciężko przeładowywania po wyłączeniu cache z narzędzi Dev. To dostaje mi odpowiedź 200, ale obraz nadal nie wyświetla się, albo w mojej strony lub kiedy otworzyć obrazek w nowej karcie. Naprawdę nie wiem gdzie iść stąd.

Utwórz 03/12/2019 o 00:00
źródło użytkownik
W innych językach...                            


1 odpowiedzi

głosy
2

Taka ścieżka nie istnieje w czasie wykonywania, być może należy spróbować jednego z następnych podejść:

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

// or require
<TechListItem imgSrc={require('../assets/images/javascript.png')}/>
Odpowiedział 03/12/2019 o 00:05
źródło użytkownik

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