Hvorfor vil ikke den relative bildet banen arbeid i min React app?

stemmer
1

Min

Jeg har en React app hvori jeg passere en relativ bildenettadressen til en komponent som en prop ...

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

Og propellen mates inn i src-attributtet ...

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

Jeg har testet ut andre forekomster av samme komponent med absolutte baner fra andre kilder ...

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

Og de fungerer helt fint.

Jeg har inspisert det ville være bilde i min side, og prøvde å åpne bildeadressen ( http: // localhost: 3000 / assets / images / javascript.png ) i Chrome, men ingenting dukker opp. Når jeg ser på fanen nettverk, sier det svarkoden for bildet er 304. Jeg har prøvd å tømme og hardt omlasting etter deaktivere cache fra dev verktøy. Dette får meg en 200 svar, men bildet fremdeles ikke vises, enten i min side, eller når jeg åpner bildet i en ny fane. Ikke helt sikker på hvor du skal dra herfra.

Publisert på 03/12/2019 klokken 00:00
kilden bruker
På andre språk...                            


1 svar

stemmer
2

En slik bane finnes ikke i runtime, kanskje du bør prøve en av de neste tilnærminger:

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

// or require
<TechListItem imgSrc={require('../assets/images/javascript.png')}/>
Svarte 03/12/2019 kl. 00:05
kilden bruker

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