0

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

我已将图像 url 数据作为道具传递给 researchSlider，然后将其放入组件状态中，并用于将每条图像数据传递到“幻灯片”子组件的函数中，使用 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>
    );
}

“幻灯片”组件：

从“反应”导入反应；

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

这是检查的截图：

在此处输入图像描述

4

1 回答 1

2

内容资产 URL 没有附加协议，//images.contentful.com/......当将此 URL 设置src为<img>标签时，它们将采用以下格式，浏览器将根据您的应用程序使用的协议自动分配协议。但是在 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
于 2018-01-31T18:09:53.657 回答