Reactjs 如何映射数据以显示样式化组件的图像？

因此，我有一个图像滑块，通过数据映射并显示我的图像

{SliderData.map((slide, index) => {
    return (
           <Section>
            <h1>{slide.title}</h1>
            <Image src={slide.image} alt={slide.alt} />
           </Section>
            );
 })}

我的问题是如何将图像传递到样式化组件中，而不是在JSX中对其进行硬编码

 const Section = styled.section`
   background: url(${image});
 `

类似于这样，我只是将图像传递到样式化组件中。我不明白的是，如果我将数据传递到样式化组件中，如何映射每张幻灯片的数据

我不知道如何才能读取所有图像的数据文件，因为图像值被传递到styled component background属性中

我想通过这个方法传递我的滑块图像，因为它允许我以一种特定的方式来设计设计样式，而当我将它硬编码到我的JSX中时，我无法做到这一点

---

有什么想法吗？

好的，我想这就是你所说的：

<Section image={image}></Section>

文件：

这是可行的

const Section=styled.Section` 背景图片：url${props=>props.bg}； `;

---

为什么还有标签？如果将图像传递到样式化组件中，图像标记将不存在什么是signin？它是一个背景图像路径。但是如果存在多个图像，如何获得多个图像？我需要映射多个图像的列表，而不仅仅是显示一个图像

<Section image={image}></Section>

const Section = styled.section`
   background: url(${(props) => props.image || 'fallback-image.jpg' }) center;