Tengo algún problema con mis imágenes en mi proyecto de reacción. De hecho, siempre pensé que la ruta relativa al atributo src se basaba en la arquitectura de archivos

Aquí mi arquitectura de archivos:

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

Sin embargo, me di cuenta de que el camino se basa en la url. En uno de mis componentes (por ejemplo, en file1.jsx) tengo esto:

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

¿Cómo es posible resolver este problema? Quiero que en cualquier forma de rutas manejadas por react-router, todas las imágenes se puedan mostrar con la misma ruta.

Estás utilizando una URL relativa, que es relativa a la url actual, no al sistema de archivos. Puede resolver esto usando URL absolutas

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

Pero eso no es bueno para cuando se implementa en www.my-domain.bike o en cualquier otro sitio. Mejor sería usar una url relativa al directorio raíz del sitio

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

En los create-react-appcaminos relativos para las imágenes no parecen funcionar. En cambio, puede importar una imagen:

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

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

Si usó create-react-app para crear su proyecto, entonces se puede acceder a su carpeta pública. Por lo tanto, debe agregar su imagecarpeta dentro de la carpeta pública.

public / images /

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

Con create-react-apphay una carpeta pública (con index.html ...). Si coloca su "myImage.png" allí, digamos debajo de la subcarpeta img , puede acceder a ellos a través de:

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

1. Haga una carpeta de imágenes dentro de src (/ src / images) Y mantenga su imagen en ella. Luego importe esta imagen en su componente (use su ruta relativa). Como abajo-

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

   Y luego en tu componente.

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

2. Otra forma es mantener las imágenes en una carpeta pública e importarlas usando la ruta relativa. Para esto, haga una carpeta de imágenes en una carpeta pública y mantenga su imagen en ella. Y luego, en su componente, úselo como a continuación.

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

   Ambos métodos funcionan pero se recomienda el primero porque su forma más limpia y las imágenes son manejadas por webpack durante el tiempo de construcción.

en mi caso, el siguiente código también funciona.

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

Algunas respuestas anteriores no funcionan, otras son buenas pero no explican el tema, en resumen:

Si la imagen está en el directorio 'público'

Ejemplo: \public\charts\a.png

En html:

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

En JavaScript:

Crear imagen a nueva img, dinámicamente:

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

Establezca la imagen en img existente con id como 'img1', dinámicamente:

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

Si la imagen está en el directorio 'src':

Ejemplo: \src\logo.svg

En JavaScript:

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

En jsx:

<img src={logo} /> 

Agregando npm de cargador de archivos a webpack.config.js según sus instrucciones de uso oficiales de esta manera:

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

trabajó para mi.

Importar imágenes en su componente

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

Y llame al nombre de la imagen en la imagen src = {RecentProjectImage_3} como un objeto

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

Un amigo me mostró cómo hacer esto de la siguiente manera:

"./" funciona cuando el archivo que solicita la imagen (por ejemplo, "ejemplo.js") está en el mismo nivel dentro de la estructura de árbol de carpetas que la carpeta "imágenes".

Coloque el logotipo en su carpeta pública, por ejemplo, en public / img / logo.png y luego consulte la carpeta pública como% PUBLIC_URL%:

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

El uso de% PUBLIC_URL% en lo anterior se reemplazará con la URL de la publiccarpeta durante la compilación. Solo los archivos dentro de la publiccarpeta pueden ser referenciados desde el HTML.

A diferencia de "/img/logo.png" o "logo.png", "% PUBLIC_URL% / img / logo.png" funcionará correctamente tanto con el enrutamiento del lado del cliente como con una URL pública no root. Aprenda a configurar una URL pública no root ejecutando npm run build.