Waarom zal niet de relatieve afbeelding pad werk in mijn Reageer app?

stemmen
1

Mijn

Ik heb een React applicatie waarbij ik langs een relatieve afbeelding URL in een component als stut ...

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

En de prop wordt in de src attribuut ...

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

Ik heb uitgetest andere instanties van dezelfde component met absolute paden uit andere bronnen ...

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

En ze werken prima.

Ik heb de afbeelding would-be geïnspecteerd in mijn pagina en probeerde het openen van de afbeelding adres ( http: // localhost: 3000 / assets / images / javascript.png ) in Chrome, maar niets verschijnt. Als ik kijk in het tabblad Netwerk, zegt de respons code voor de afbeelding is 304. Ik heb geprobeerd het legen en hard-herladen na het uitschakelen van de cache van dev gereedschap. Dit geeft me een 200 respons, maar het beeld nog steeds niet opdagen, hetzij in mijn pagina of wanneer het beeld dat ik te openen in een nieuw tabblad. Echt niet zeker waar te gaan vanaf hier.

De vraag is gesteld op 03/12/2019 om 00:00
bron van user
In andere talen...                            


1 antwoorden

stemmen
2

Een dergelijk pad bestaat niet in runtime, misschien moet je een van de volgende methoden proberen:

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

// or require
<TechListItem imgSrc={require('../assets/images/javascript.png')}/>
antwoordde op 03/12/2019 om 00:05
bron van user

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