在反应中传递道具，图像src不起作用

Question

我将图像 src 和 alt 存储在对象数组中。我将每个对象作为道具传递。

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 LandingPage

然后我尝试在 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}/>
    )
}

它不工作。我有控制台记录的 const 图像并且目录通过了。

Answer 1

请您执行以下操作。请确保导入的图片在正确的目录中。

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 LandingPage

然后像你一样

import React from 'react'

export const ImageBlock = (props) => {
    const image = props.image
    return (
        <img className="c-image-block" src={image.src} alt={image.alt}/>
    )
}