Estoy almacenando la imagen src y alt en una matriz de objetos. Estoy pasando cada objeto como prop.
import React from 'react' import { ImageBlock } from '../components/ImageBlock' const LandingPage = () => { const imageBlocks = [ { src: "../assets/images/mobile/image-transform.jpg", alt: "transform" }, { src: "../assets/images/mobile/image-stand-out.jpg", alt: "stand out" }, { src: "../assets/images/mobile/image-graphic-design.jpg", alt: "graphic design" }, { src: "../assets/images/mobile/image-photography.jpg", alt: "photography" } ] return ( <div className="l-home-wrapper"> <ImageBlock image={imageBlocks[0]}/> </div> ) } export default LandingPageLuego estoy tratando de hacer referencia a él en el componente ImageBlock
import React from 'react' export const ImageBlock = (props) => { const image = props.image return ( <img className="c-image-block" src={image.src} alt={image.alt}/> ) }No funciona. He registrado una imagen const en la consola y aparece el directorio.
¿Puedes hacer lo siguiente? Asegúrese de que las imágenes importadas estén en el directorio correcto.
import React from 'react'; import { ImageBlock } from '../components/ImageBlock'; import imageTransform from '../assets/images/mobile/image-transform.jpg'; import imageStandOut from '../assets/images/mobile/image-stand-out.jpg'; import imageGraphic from '../assets/images/mobile/image-graphic-design.jpg'; import imagePhoto from '../assets/images/mobile/image-photography.jpg'; const LandingPage = () => { const imageBlocks = [ { src: imageTransform, alt: "transform" }, { src: imageStandOut, alt: "stand out" }, { src: imageGraphic, alt: "graphic design" }, { src: imagePhoto, alt: "photography" } ] return ( <div className="l-home-wrapper"> <ImageBlock image={imageBlocks[0]}/> </div> ) } export default LandingPageY luego como lo hiciste
import React from 'react' export const ImageBlock = (props) => { const image = props.image return ( <img className="c-image-block" src={image.src} alt={image.alt}/> ) }