Question

我正在尝试设置一个名为FullscreenImage的反应组件，它以视差样式显示我的图像为宽度/高度的100％。由于我将更频繁地使用此组件，我认为通过props传递图片的URL是个好主意。问题是如果我将URL作为道具传递，它不会加载图像，而只是插入URL。我怎样才能加载图片？我在我的网页上看到，静态插入的网址会转换为前缀为static/media/的网址。

FullscreenImage.jsx

 let defaultStyle = {
    minHeight: '100vh !important',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    backgroundAttachment: 'fixed',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
    overflow: 'hidden'
};

class FullscreenImage extends Component {

    constructor() {
        super();
        this.state = {
            defaultStyle: defaultStyle,
            background: {}
        };
    }

    componentDidMount() {
        this.setState({background: this.props.source.uri});
    }

    render() {
        console.log(this.state);
        return (<div style={{
                ...defaultStyle,
                backgroundImage: this.state.background
            }}></div>);
    }
}
export default FullscreenImage;

App.jsx

let picture1 = {
    uri: "url(../img/austin-neill-247237-unsplash.jpg)"
};

class App extends Component {

    render() {
        return (<section>
            <FullscreenImage source={picture1}>
            </section>);
    }
}
export default Login;

提前致谢。

Answer 1

要为背景图片应用样式，您需要在前面添加 url ，然后添加图片路径或图片网址。

检查此示例代码，该代码显示您需要根据需要为其添加宽度和高度的图像注释

import React, { Component } from 'react';
import './App.css'

let defaultStyle = {
  minHeight: '500px',
  width: '500px',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  backgroundAttachment: 'fixed',
  backgroundPosition: 'center',
  backgroundRepeat: 'no-repeat',
  backgroundSize: 'cover',
  overflow: 'hidden',
};

class App extends Component {
  constructor(){
    super()
    this.state = {
      defaultStyle: defaultStyle,
    }
  }

  componentDidMount() {
    this.setState({background: "https://www.npmjs.com/static/images/wombat-camper.png"});
  }

  render() {
    return (
        <div style={{...defaultStyle, backgroundImage: "url(" +this.state.background + ")"}}></div>/
        //----alternate option ES6 syntax (backgroundImage: `url${this.state.background}`)----
    );
  }
}
export default App;

Answer 2

请尝试替换

return (<div style={{
          ...defaultStyle,
          backgroundImage: this.state.background
    }}></div>
);

到

return (<div style={{
          ...defaultStyle,
          backgroundImage: `url${this.state.background}`
    }}></div>
);

但为什么？

background-image: <string>不是有效的HTML语法，background-image: <url>是。

Answer 3

我找到了解决方案。您不能将URL直接传递给子组件，因为react需要一个imageObject。首先需要使用以下内容导入图片：

import pictureOne from '../img/austin-neill-247237-unsplash.jpg';
let picture1 = {
    uri: pictureOne
};

然后（如@David Guans回答中所述）添加URL前缀以让HTML知道它是来自此URL的图像。

backgroundImage: 'url(' + this.state.background + ')'（在这里使用ES5方式）

此外，我忘了为图像设置高度，因此无法显示。我刚刚使用defaultStyle

更新了我的minHeight: 100vh对象

let defaultStyle = {
    minHeight: '100vh',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    backgroundAttachment: 'fixed',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
    overflow: 'hidden'
};

ReactJS - 未加载图像

3 个答案: