React Redux 图片不会加载

Question

老实说，这可能很简单，只是看着它，盯着它看了很长时间，然后才做出反应，但在我的部分组件上，我正在加载我的 backgroundImg 道具，不会加载图像，我无法弄清楚.我的图片在public文件夹里，我的代码在src components文件夹里

此外，当我通过 prop

调用它们时，我可以将图像加载到文件中

Home.js 这是我调用我的组件并尝试通过 prop 类型加载文件的地方

import React from 'react'
import styled from 'styled-components'
import Section from './Section'


function Home() {
    return (
        <Container>
            <Section 
                title="Model S"
                description="Order Online for Touchless Delivery"
                backgroundImg='/public/pictures/model-s.jpg'
                leftBtnText="Custom Order"
                rightBtnText="Existing Inventory"
            />
            <Section 
                title="Model E"
                description="Order Online for Touchless Delivery"
                backgroundImg=".\Pictures\model-e.jpg"
                leftBtnText="Custom Order"
                rightBtnText="Existing Inventory"
            />
            <Section />
            <Section />
            
        </Container>
    )
}

export default Home

//Home and styled help you stlye the component without using css

const Container = styled.div`
    height: 100vh;
`

Section.js 屏幕组件

import React from 'react'
import styled from 'styled-components'


//props are just parameters you can set when calling the component

function Section(props) {
    
    return (
        <Wrap bgImg={props.backgroundImg}>
            <ItemText>
                <h1>{props.title}</h1>
                <p>{props.description}</p>
            </ItemText>
            <Buttons>
                <ButtonGroup>
                    <LeftButton>
                        {props.leftBtnText}
                    </LeftButton>
                    <RightButton>
                        {props.rightBtnText}
                    </RightButton>
                </ButtonGroup>
                <DownArrow src='/Pictures/down-arrow.svg' />
            </Buttons>
        </Wrap>
    )
}

export default Section

const Wrap = styled.div`
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
`

const ItemText = styled.div`
    padding-top: 15vh;
    text-align: center;
`

const ButtonGroup = styled.div`
    display: flex;
    margin-bottom: 30px;
    @media (max-width: 786px){
        flex-direction: column;
    }
`

const LeftButton = styled.div`
    background-color: rgba(23, 26, 32, 0.8);
    height: 40px;
    width: 256px;
    color: white;
    display: flex; 
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    opacity: 0.85;
    text-transform: uppercase;
    font-size: 12px;
    cursor: pointer;
    margin: 8px;
`

const RightButton = styled(LeftButton)`
    background: white;
    opacity: 0.65;
    color: black;
`

const DownArrow = styled.img`
    margin-top: 20px;
    height: 40px;
    overflow-x: hidden;
    animation: animateDown infinite 1.5s;
`

const Buttons = styled.div`

`


Thanks for the help.

Answer 1

我还没有测试过这个，但看起来你没有在样式组件中使用 Wrap bgImg 属性。有背景大小，背景位置，背景重复，但没有使用道具的背景图像。

示例：
background-image: ${props => props.bgImg || ''};

https://styled-components.com/docs/basics#passed-props

React Redux 图片不会加载

React Redux Image Wont load

javascript

reactjs

redux

react-redux