ReactJS - 未加载图像答案

【问题标题】：ReactJS - Image isn't loadedReactJS - 未加载图像
【发布时间】：2018-03-19 21:58:50
【问题描述】：

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

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;

提前致谢。

【问题讨论】：

标签： javascript image reactjs object

【解决方案1】：

请尝试替换

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> 是。

【讨论】：

【解决方案2】：

要为背景图片应用样式，您需要在前面添加url，后跟图片路径或图片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;

【讨论】：

【解决方案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方式）

另外我忘记为我的图片设置高度，这样它就不会显示。我刚刚用minHeight: 100vh 更新了我的defaultStyle 对象

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

【讨论】：