Javascript 在React中显示来自API的图像

我正在尝试显示API中的图像。到目前为止，我使用的代码似乎不起作用，在图像的src中，它只显示字符串而不是图像，即

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

  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;

import React，{Component}来自'React'；
导入“../main/main.css”；
类主扩展组件{
构造函数（）{
超级（）；
此.state={
名称：'反应'，
awsApiData:[]，
};
}
componentDidMount（）{
console.log（'app-mounted'）；
/*全局提取*/
取（'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；
返回(
{（data&&data.home）&&
{data.home[0].title}
{data.home[0].body}

}    
);
}
}
导出默认主；

您正在将字符串的值分配给img

src

，因此它将仅以字符串形式给出输出

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

所以试着改变

至（删除花括号{}周围的引号）

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

---

您正在将字符串的值分配给img

src

，因此它将仅以字符串形式给出输出

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

所以试着改变

至（删除花括号{}周围的引号）

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

---

请同时发布您的api回复

---

查看将

src=“{data.home[0].image}”更改为src={data.home[0].image}

是否有帮助

请同时发布您的api响应

---

查看是否将

src=“{data.home[0].image}”更改为src={data.home[0].image}

帮助

您能否尝试将

src=“{data.home[0].image}”更改为
src={data.home[0].image}
。。删除花括号周围的双引号。这样做有效，我不敢相信这是语音标记，你能添加答案吗？我能标记为正确的
“
始终是一个字符串
{}
是javascript表达式的JSX语法。若要在JSX中使用变量，您必须使用
{}
语法，而不是从字符串中使用。@Sole，已添加答案。.能否尝试将
src=“{data.home[0].image}”
更改为
src={data.home[0].image}
。。删除花括号周围的双引号。这样做有效，我不敢相信这是语音标记，你能添加答案吗？我能标记为正确的
“
始终是一个字符串
{}
是javascript表达式的JSX语法。若要在JSX中使用变量，必须使用
{}
语法，而不是从字符串中使用。@Sole，已添加答案。。