[英]Passing props in react, image src not working
我将图像 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 图像并且目录通过。
你能不能做到以下几点。 请确保导入的图像位于正确的目录中。
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}/>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.