javascript - slider 中不显示图像

Question

我正在使用 Contentful 开发 GatsbyJS 项目，并创建了一个模板“BlogPost”。在此模板中，我导入了一个“ResearchSlider”组件。但是，图像根本不显示。

我已将图像 url 数据作为 Prop 传递给 ResearchSlider，然后将其放入组件状态中，并在将每 block 图像数据传递到“Slide”子组件的函数中使用，使用for 循环。在“Slide”中，图像数据 block 用作 div 样式中的 backgroundImage 的值。

我想了解为什么它们不显示以及如何解决此问题。

这是相关代码。

ResearchSlider 组件:

export default class ResearchSlider extends React.Component {
constructor(props) {
    super(props);

    this.state = {
                images: [this.props.firstSlide, 
                    this.props.secondSlide, 
                    this.props.thirdSlide
                    ], 
                translateValue: 0, 
                index: 0
    }

    this.renderSlides = this.renderSlides.bind(this);
    this.handleClickPrevious = this.handleClickPrevious.bind(this);
    this.handleClickNext = this.handleClickNext.bind(this);
    this.slideWidth = this.slideWidth.bind(this);
}

renderSlides() {
    const images = this.state.images;
    let slides = []

    for(let i = 0; i < images.length; i++)
      slides.push(<Slide key={i} image={images[i]} />)

    return slides
}

render() {
    const { translateValue } = this.state
    return(
        <div className='slider'>
            <div className="slider-wrapper"
                style={{
                    transform: `translateX(${translateValue}px)`,
                    transition: 'transform ease-out 0.3s'
                }}>
                { this.renderSlides() }
            </div>

            <ClickPrevious slideRight={this.handleClickPrevious}/>
            <ClickNext slideLeft={this.handleClickNext}/>
        </div>
    );
}

“幻灯片”组件:

从“react”导入React；

const Slide = ({image}) => {
    const styles = {
        backgroundImage: `url("${image}")`,
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: '50% 60%'
      }

      return <div className="slide" style={styles}></div>
    }

export default Slide

这是检查的屏幕截图:

Answer 1

内容 Assets URL 没有附加协议(protocol)，它们将采用以下格式 //images.contentful.com/......当将此 url 设置为 src 时的<img>标签浏览器将根据您的应用程序正在使用的协议(protocol)自动分配协议(protocol)。但是在 css 中使用 url，您需要将协议(protocol)显式附加到 url 中。您的 Slide 组件应该如下所示。

const Slide = ({image}) => {
    const styles = {
        backgroundImage: `url("https:${image}")`,
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: '50% 60%'
      }

      return <div className="slide" style={styles}></div>
    }

export default Slide