Proč se relativní cesta obrazu práce v mém Reagovat aplikaci?

hlasů
1

My

Mám Reagovat aplikaci, kde jsem se projít relativní URL obrázku do složky jako rekvizita ...

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

A vrtule se přivádí do atribut 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>
);
}

Testoval jsem mimo jiné instance stejné součásti s absolutní cestou z jiných zdrojů ...

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

A fungují v pohodě.

Já jsem prohlédl rádoby obraz v mé stránky a snažil se otevřít adresu obrázku ( http: // localhost: 3000 / assets / images / javascript.png ) v Chromu, ale nic se ukáže. Když se podívám na kartě sítě, říká kód odpovědi na snímku je 304. Snažil jsem vyprazdňování a hard-překládce po zakázání mezipaměti z Vývojové nástroje. To mi dostane 200 odpověď, ale obraz stále nezobrazuje, buď v mé straně, nebo když jsem otevřít obrázek v nové kartě. Opravdu není jistý, kam jít odsud.

Položena 03/12/2019 v 00:00
zdroj uživatelem
V jiných jazycích...                            


1 odpovědí

hlasů
2

Taková cesta neexistuje v běhu, možná byste měli vyzkoušet některý z následujících způsobů:

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

// or require
<TechListItem imgSrc={require('../assets/images/javascript.png')}/>
Odpovězeno 03/12/2019 v 00:05
zdroj uživatelem

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