图像未显示在滑块中

Question

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

我已经将图像 url 数据作为 props 传递给 researchSlider，然后将其放入组件状态，并用于将每条图像数据传递到 'Slide'子组件，使用for循环。在'Slide'中，该条图片数据作为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>
    );
}

'Slide' 分量：

从 '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

内容资产 URL 没有附加协议，当将此 url 设置为 <img> 的 src 时，它们将采用以下格式 //images.contentful.com/......标记浏览器将根据您的应用程序使用的协议自动分配协议。但是在 css 中使用 url 您需要将协议显式附加到 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

图像未显示在滑块中

Images not displaying in Slider

javascript

reactjs

graphql

contentful

react-props