Estoy tratando de mostrar los datos y la imagen usando un componente. La primera vez que aparecen los datos y las imágenes, pero cuando actualizo la página, los datos y las imágenes desaparecen.
Esto es por componente Team.js
import React from 'react'; const Team = (props)=>{ return( <> <h1>{props.data.name}</h1> <img name="photo" src={require(`../images/${props.data.image}`)}/> </> ) } export default Team;Mi componente está presente en la carpeta de componentes y las imágenes están presentes en la carpeta de imágenes.
require generalmente no funciona con cadenas literales (cadenas de plantilla). En otras palabras, la ubicación debe conocerse en el momento de la compilación.
Veo dos soluciones.
1. Guarde sus imágenes en la carpeta pública/imágenes y haga referencia a ellas usando la URL de su sitio web (preferible)
Digamos que almacena todas sus imágenes en la carpeta public/images . Podemos obtener la URL pública del sitio web usando
var imageBasePath = window.location.protocol + "//" + window.location.host + "/images/";
esto nos permitirá usar esto para hacer referencia a nuestras imágenes públicas en el src para una etiqueta img.
<img name="photo" src={imageBasePath + props.data.image} />
donde image es el nombre real de la imagen ubicada en la carpeta public/images.
el componente de su equipo se vería así
const Team = (props) => { var imageBasePath = window.location.protocol + "//" + window.location.host + "/images/"; return ( <> <h1>{props.data.name}</h1> <img name="photo" src={imageBasePath + props.data.image} /> </> ); };2. Almacene las imágenes requeridas en una matriz y referencia por índice, exporte como un objeto.
Probablemente no sea el método preferible, ya que trabajar con índices puede ser complicado.
export const imageList = [ require("./checklist.jpg"), require("./question.jpg"), require("./test-pattern.jpg") ];y luego la implementación del equipo
import { imageList } from "./Images/imageList"; export const TeamRequire = (props) => { let image = imageList[props.data.id]; return ( <> <h1>{props.data.name}</h1> <img name="photo" src={image} /> </> ); };para aliviar el problema del índice, podemos almacenarlos y obtenerlos mediante objectKey en su lugar
export const imageListObj = { checkList: require("./checklist.jpg"), question: require("./question.jpg"), testPattern: require("./test-pattern.jpg") }; import { imageListObj } from "./Images/imageList"; export const TeamRequireObj = (props) => { let image = imageListObj[props.data.imageId]; return ( <> <h1>{props.data.name}</h1> <img name="photo" src={image} /> </> ); };Aquí hay una caja de códigos con los tres conceptos.
https://codesandbox.io/s/adoring-rosalind-2xhj67?file=/src/App.js