从React中的API显示图像

Question

我正在尝试从我的API显示图像。到目前为止，我使用的代码似乎无效，在图片的src中，它仅显示字符串而不是图片，即<img src="{data.home[0].image}" alt="image">。

到目前为止，我的代码是：

  import React, { Component } from 'react';
  import '../main/main.css';

  class Main extends Component {
      constructor() {
          super();
          this.state = {
              name: 'React',
              awsApiData: [],
          };
      }

      componentDidMount() {
          console.log('app mounted');
          /*global fetch */
          fetch('https://onelbip0e6.execute-api.eu-west-2.amazonaws.com/livestage/xxxx')
              .then(data => data.json())
              .then(data => this.setState({ awsApiData: data }, () => console.log(data)));
      }

      render() {
          const data = this.state.awsApiData;
          return (
              <div className="main-content container">
           {(data && data.home) &&
              <div><h2>{data.home[0].title}</h2><br /><p>{data.home[0].body}</p>
              <img src="{data.home[0].image}" alt="image"></img>
              </div>
          }    
      </div>
          );
      }
  }
  export default Main;

Answer 1

您正在将字符串的值分配给img src，因此它将仅将输出作为字符串。

您需要使用大括号将JavaScript表达式嵌入属性中。

因此，请尝试更改

<img src="{data.home[0].image}" alt="image">

to（删除大括号{}的引号）

<img src={data.home[0].image} alt="image">

[嵌入JavaScript时，不要在大括号附近加上引号属性中的表达式。您应该使用引号（对于字符串值）或花括号（用于表达式），但不能同时使用两者属性。

Reference Link here..

Answer 2

也请发布您的api响应。

查看是否将src =“ {data.home [0] .image}”更改为src = {data.home [0] .image}有助于