Question

我在ReactJS中工作，并且将照片的URL存储在State中。我想使用该photoURL调用组件渲染中的图像。但是当我使用普通的src={this.state.photoURL}时会引发错误。

理想情况下，我可以将其用作这样的容器中的背景图像：

<div className='photo-cont' style='background-image:url({this.state.photoURL}); background-size:cover;'

作为普通的img，我已经尝试过了，在花括号两边加上或不带有引号，而花括号本身也有和没有。

class Foo extends Component {
  state: {
    photoURL: 'www.foobar.com/foo.jpg',
  }
  render () {
    return(
      <img src={this.state.photoURL}></img>
    )
  }
}

我一直收到以下错误：'TypeError：无法读取null的属性'photoURL'

Answer 1

似乎您的代码中有错字。要初始化类字段（例如state，应使用=。

我添加了photoURL的示例作为div的图像和背景图像。记住在div上设置宽度/高度/填充以显示图像：

class Foo extends React.Component {
  state = {
    photoURL: 'https://unsplash.it/400/200',
  }

  render () {
    return(
      <div>
        <img src={this.state.photoURL}/>
        <div style={{
          width: '400px',
          height: '200px',
          backgroundImage: `url(${this.state.photoURL})`,
        }}/>
      </div>
    )
  }
}

ReactDOM.render(<Foo/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

class Foo extends Component {
 contructor(props) {
  super(props)
  this.state = {
   photoURL: 'www.foobar.com/foo.jpg',
  }
 }

  render () {
    return(
      <img src={this.state.photoURL}></img>
    )
  }
}

尝试使用contructor（）定义状态

Answer 3

import logo from './logo.png';
class Foo extends Component {
  render () {
    return(
      <img src={logo}></img>
    )
  }
}

查看他们的文档： https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files

在React JSX中使用STATE作为HTML ATTR

3 个答案: