时间戳

首页 > 解决方案 > 在 React 中显示来自 API 的图像

javascript - 在 React 中显示来自 API 的图像

问题描述

我正在尝试从我的 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;

标签： javascriptreactjs

解决方案

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

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

所以尝试改变

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

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

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

在属性中嵌入 JavaScript 表达式时，不要在花括号周围加上引号。您应该使用引号（用于字符串值）或花括号（用于表达式），但不能在同一属性中同时使用。

参考链接在这里..

推荐阅读