Miért nem a relatív kép elérési munkát én reagálni app?

szavazat
1

Saját

Van egy reagálnak app, ahol átadom relatív kép URL-jét egy komponenst, mint prop ...

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

És a prop táplálják be a src attribútum ...

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

Kipróbáltam ki más esetekben az azonos összetevő abszolút utak más forrásokból ...

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

És jól működnek.

Már megvizsgálták a leendő kép oldalam, és megpróbálta megnyitjuk a képet címét ( http: // localhost: 3000 / eszközök / images / javascript.png ) a Chrome, de semmi sem jelenik meg. Amikor nézem a hálózat lapon azt mondja a válasz kódját a kép 304 Megpróbáltam kiürítése és kemény újratöltés letiltása után a cache származó dev eszközöket. Ez lesz nekem a 200 válasz, de a kép még mindig nem jelenik meg, akár az oldalamon, vagy ha kinyitom a képet egy új lapon. Tényleg nem tudja, hol menni innen.

A kérdést 03/12/2019 00:00
a forrás felhasználó
Más nyelveken...                            


1 válasz

szavazat
2

Ilyen elérési út nem létezik runtime, akkor talán érdemes egy következő megközelítések:

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

// or require
<TechListItem imgSrc={require('../assets/images/javascript.png')}/>
Válaszolt 03/12/2019 00:05
a forrás felhasználó

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