Por que a imagem Trabalho caminho relativo no meu não vai reagir aplicativo?

votos
1

Minha

Eu tenho um Reagir aplicativo onde eu passar a URL da imagem relativa a um componente como uma prop ...

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

E o prop é alimentado no atributo 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>
);
}

Eu testei outras instâncias do mesmo componente com caminhos absolutos de outras fontes ...

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

E eles trabalham muito bem.

Eu inspeccionados a imagem que pretende ser na minha página e tentei abrir o endereço de imagem ( http: // localhost: 3000 / assets / images / javascript.png ) no Chrome, mas nada aparece. Quando eu olho na guia rede, ele diz que o código de resposta para a imagem é 304. Eu tentei esvaziamento e hard-recarregar depois de desativar o cache de ferramentas de desenvolvimento. Isso me recebe uma resposta 200, mas a imagem ainda não aparecer, seja na minha página ou quando eu abrir a imagem em uma nova aba. Realmente não é certeza para onde ir a partir daqui.

Publicado 03/12/2019 em 00:00
fonte usuário
Em outras línguas...                            


1 respostas

votos
2

Tal caminho não existe em tempo de execução, talvez você deve tentar uma das seguintes abordagens:

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

// or require
<TechListItem imgSrc={require('../assets/images/javascript.png')}/>
Respondeu 03/12/2019 em 00:05
fonte usuário

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