Question

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

我已将图像url数据作为props传递给researchSlider，然后将其放入组件状态，并用于将每个图像数据传递到“Slide”子组件的函数中，一个for循环。在“幻灯片”中，图像数据用作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

内容资产网址没有附加协议，当将此网址设置为//images.contentful.com/......标记的src时，浏览器将分配以下格式<img>协议自动根据您的应用程序使用的协议。但是使用css中的url需要将协议明确附加到url。您幻灯片组件应如下所示。

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

图像未在Slider中显示

1 个答案: