Tenho algum problema com minhas imagens no meu projeto de reação. Na verdade, eu sempre pensei que o caminho relativo no atributo src era construído na arquitetura de arquivos

Aqui minha arquitetura de arquivos:

components
    file1.jsx
    file2.jsx
    file3.jsx
container
img
js 
... 

No entanto, percebi que o caminho é construído no URL. Em um dos meus componentes (por exemplo, em file1.jsx), tenho o seguinte:

localhost/details/2
<img src="../img/myImage.png" /> -> works

localhost/details/2/id
<img src="../img/myImage.png" /> -> doesn't work, images are not displayed

Como é possível resolver este problema? Quero que, em qualquer forma de rotas manipuladas pelo react-router, todas as imagens possam ser exibidas com o mesmo caminho.

Você está usando um URL relativo, que é relativo ao URL atual, não ao sistema de arquivos. Você pode resolver isso usando URLs absolutos

<img src ="http://localhost:3000/details/img/myImage.png" />

Mas isso não é ótimo para quando você implanta no www.my-domain.bike ou em qualquer outro site. Melhor seria usar um URL em relação ao diretório raiz do site

<img src="/details/img/myImage.png" />

Em create-react-appcaminhos relativos, as imagens parecem não funcionar. Em vez disso, você pode importar uma imagem:

import logo from './logo.png' // relative path to image 

class Nav extends Component { 
    render() { 
        return ( 
            <img src={logo} alt={"logo"}/> 
        )  
    }
}

Se você usou create-react-app para criar seu projeto, sua pasta pública está acessível. Então você precisa adicionar sua imagepasta dentro da pasta pública.

public / images /

<img src="/images/logo.png" />

Com create-react-appexiste uma pasta pública (com index.html ...). Se você colocar seu "myImage.png" lá, digamos, na subpasta img , poderá acessá-los através de:

<img src={window.location.origin + '/img/myImage.png'} />

1. Crie uma pasta de imagens dentro de src (/ src / images) e mantenha sua imagem nela. Em seguida, importe esta imagem em seu componente (use seu caminho relativo). Como abaixo-

   import imageSrc from './images/image-name.jpg';

   E então no seu componente.

   <img title="my-img" src={imageSrc} alt="my-img" />

2. Outra maneira é manter as imagens na pasta pública e importá-las usando o caminho relativo. Para isso, crie uma pasta de imagem em pasta pública e mantenha sua imagem nela. E então no seu componente use-o como abaixo.

   <img title="my-img" src='/images/my-image.jpg' alt="my-img" />

   O método funciona, mas o primeiro é recomendado, porque sua maneira mais limpa e as imagens são manipuladas pelo webpack durante o tempo de compilação.

no meu caso, o código a seguir também funciona.

<img src={require('../logo.png')} alt="logo" className="brand-logo"/>

Algumas respostas antigas não funcionam, outras são boas, mas não explicam o tema, em resumo:

Se a imagem estiver no diretório 'public'

Exemplo: \public\charts\a.png

Em html:

<img id="imglogo" src="/charts/logo.svg" />

Em JavaScript:

Crie uma imagem para o novo img dinamicamente:

var img1 = document.createElement("img");  
img1.src = 'charts/a.png';  

Defina a imagem como img existente com o ID como 'img1', dinamicamente:

document.getElementById('img1').src = 'charts/a.png';

Se a imagem estiver no diretório 'src':

Exemplo: \src\logo.svg

Em JavaScript:

import logo from './logo.svg';  
img1.src = logo;  

Em jsx:

<img src={logo} /> 

Incluindo o carregador de arquivos npm no webpack.config.js de acordo com as instruções de uso oficiais, da seguinte maneira:

config.module.rules.push(
    {
        test: /\.(png|jpg|gif)$/,
        use: [
            {
                loader: 'file-loader',
                options: {}
            }
        ]
    }
);

trabalhou para mim.

Importar imagens no seu componente

import RecentProjectImage_3 from '../../asset/image/recent-projects/latest_news_3.jpg'

E chame o nome da imagem na imagem src = {RecentProjectImage_3} como um objeto

 <Img src={RecentProjectImage_3} alt="" />

Um amigo me mostrou como fazer isso da seguinte maneira:

"./" funciona quando o arquivo que está solicitando a imagem (por exemplo, "example.js") está no mesmo nível na estrutura da árvore de pastas que a pasta "images".

Coloque o logotipo na sua pasta pública em, por exemplo, public / img / logo.png e, em seguida, consulte a pasta pública como% PUBLIC_URL%:

<img src="%PUBLIC_URL%/img/logo.png"/>

O uso de% PUBLIC_URL% acima será substituído pelo URL da publicpasta durante a compilação. Somente arquivos dentro da publicpasta podem ser referenciados no HTML.

Diferentemente de "/img/logo.png" ou "logo.png", "% PUBLIC_URL% / img / logo.png" funcionará corretamente tanto com o roteamento do lado do cliente quanto com um URL público não raiz. Aprenda a configurar um URL público não raiz executando npm run build.