Pourquoi pas le travail de chemin d'image par rapport à mon React application?

voix
1

Structure

J'ai React app dans lequel je passe une URL d'une image par rapport à un composant comme un accessoire ...

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

Et l'hélice est introduit dans l'attribut 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>
);
}

Je l'ai testé d'autres instances du même composant avec des chemins absolus d'autres sources ...

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

Et ils fonctionnent très bien.

J'ai inspecté le serait-être l' image dans ma page et essayé d' ouvrir l'adresse d'image ( http: // localhost: 3000 / assets / images / javascript.png ) dans Chrome, mais rien ne montre. Quand je regarde dans l'onglet réseau, il dit le code de réponse pour l'image est 304. J'ai essayé de vider et dur rechargeant après la désactivation du cache des outils de dev. Cela me fait une réponse 200, mais l'image ne montre toujours pas, que ce soit dans ma page ou quand j'ouvre l'image dans un nouvel onglet. Vraiment pas sûr où aller d'ici.

Créé 03/12/2019 à 00:00
source utilisateur
Dans d'autres langues...                            


1 réponses

voix
2

Un tel chemin n'existe pas dans l'exécution, peut-être vous devriez essayer l'une des prochaines approches:

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

// or require
<TechListItem imgSrc={require('../assets/images/javascript.png')}/>
Créé 03/12/2019 à 00:05
source utilisateur

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