首页 文章

图像未在Slider中显示

提问于
浏览 次
0

我正在使用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

以下是检查的屏幕截图：

enter image description here

javascript reactjs graphql contentful react-props

1 回答

  • 2

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

相关问题