Intenté agregar una imagen en react. No estoy usando webpack, estoy usando parceljs. También usando typescript he probado:

import image from path/to/image.png <img src={image} />

Dentro del componente de reacción:

Prueba: <img src="path/to/image.png" />

Prueba: <img src={"path/to/image.png"} />

Aún así, no funciona.

El código se parece a esto:

import * as React from 'react';

const componentName = () => (
  <div>
     <img src="path/to/image.png" />
  </div>
);
15
Josue Toledo 16 oct. 2018 a las 21:22

2 respuestas

La mejor respuesta

Necesitas hacerlo así

import image from 'path/to/image.png';

Y luego, dentro de su reacción JSX, siga el siguiente código:

<img src={image} />
14
AmerllicA 16 oct. 2018 a las 18:28

No es diferente entre <img src="path/to/image.png"/> y <img src={"path/to/image.png"}/>, debes import tu imagen y luego usarla como un objeto JavaScript, mira a continuación:

import somePhoto from 'path/to/image.png';

No atiende a 'path/to/image.png'; y lo escribe como si nada. ingrese su ruta entre comillas. Luego, dentro de su código react JSX, escriba su etiqueta img como se muestra a continuación:

<img src={somePhoto} />

Hay más formas diferentes. en otros proyectos de react usamos otro servidor para cargar las imágenes. pero las imágenes específicas para la aplicación deben ser como arriba.

1
AmerllicA 16 oct. 2018 a las 18:42