在 React 中显示来自 API 的图像

Question

我正在尝试从我的 API 中显示图像。到目前为止我使用的代码似乎不起作用，在图像的 src 中它只显示字符串而不是图像 ie <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 表达式时，不要在花括号周围加上引号。您应该使用引号（用于字符串值）或大括号（用于表达式），但不能在同一属性中同时使用。

参考链接在这里..