Warum wird nicht die relative Bildpfad Arbeit in meiner app reagieren?

stimmen
1

Meine

Ich habe eine app React wobei I eine relative Bild URL in eine Komponente als Stütze passieren ...

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

Und die Stütze in das src-Attribut zugeführt ...

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

Ich habe andere Instanzen derselben Komponente mit absoluten Pfaden aus anderen Quellen testet ...

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

Und sie gut funktionieren.

Ich habe überprüft die Möchtegern-Bild in meiner Seite und versucht , die Bildadresse zu öffnen ( http: // localhost: 3000 / assets / images / javascript.png ) in Chrome, aber nichts zeigt nach oben. Als ich in dem Registerkarte Netzwerk aussehen, heißt es der Antwortcode für das Bild ist 304. Ich habe versucht , Entleerung und hart Nachladen nach dem Cache von Entwickler - Tool zu deaktivieren. Das bekommt mir eine 200 - Antwort, aber das Bild ist noch zeigen , nicht auf, entweder in meiner Seite oder , wenn ich das Bild in einem neuen Tab öffnen. Wirklich nicht sicher , wo man von hier geht.

Veröffentlicht am 03/12/2019 um 00:00
quelle vom benutzer
In anderen Sprachen...                            


1 antworten

stimmen
2

Ein solcher Pfad in der Laufzeit nicht existiert, sollten Sie vielleicht eine der nächsten Ansätze versuchen:

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

// or require
<TechListItem imgSrc={require('../assets/images/javascript.png')}/>
Beantwortet am 03/12/2019 um 00:05
quelle vom benutzer

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