我创建了一个带有create-react-app的项目，我试图加载图像，但始终遇到相同的解析错误。

代码如下：

temperatures = [];
get_info = (data) => {
    for(var i = 0; i < data['list'].length; i++){
        temperatures.push(String(data['list'][i]['main']['temp']))
    }
};

weather = (city_name) => {
    var key = '.......';
    var base_url = 'http://api.openweathermap.org/data/2.5/forecast?';
    var url = base_url + 'appid=' + key + '&q=' + city_name + '&units=metric';
    fetch(url)
        .then(response => response.json())
        .then(contents => {
            get_info(contents);

            console.log(temperatures); // --> Here the data is available!
        });    
};

两个文件（Jumbotron.js和图像）都位于create-react-app的src文件夹中。

使用npm start运行时，出现此解析错误

  1 import React,{ Component } from 'react'
  2 import profile from './profile.png'
  3 
  4 class Jumbotron extends Component {
  5     render() {
  6         return (
  7             <div classname="container">
  8                 <JumbotronName />
  9                 <JumbotronImg />
 10             </div>
 11         )
 12     }
 13 }
 14 
 15 const JumbotronName = () => {
 16     return (
 17         <div classname="container">
 18             <h1>Temp</h1>
 19         </div>
 20     )
 21 }
 22 
 23 const JumbotronImg = () => {
 24     return (
 25         <div classname="container">
 26             <img src{profile} alt="Profile" />
 27         </div>
 28     )
 29 }
 30 
 31 export default Jumbotron

有什么想法吗？

编辑：如果我在配置文件的第26行（例如src {... profile}）前放置“ ...”，它将进行编译，但图像不会加载