Изображение не загружается в реакции

Question

Я создал проект с помощью create-реагировать-приложение, и я пытаюсь загрузить изображение, но я получаю ту же ошибку синтаксического анализа.

Вот код:

  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

Оба файла (Jumbotron.js и изображение) находятся в папке src приложения create-реакции-приложения.

Когда я запускаю с запуском npm, я получаю эту ошибку синтаксического анализа

./src/Jumbotron.js
  Line 26:22:  Parsing error: Unexpected token, expected "..."

  24 |     return (
  25 |         <div className="container">
> 26 |             <img src{profile} alt="Profile" />
     |                      ^
  27 |         </div>
  28 |     )
  29 | }

Любые идеи?

РЕДАКТИРОВАТЬ: если я поставлю '...' перед профилем в строке 26 (ex src {... profile}), он будет скомпилирован, но изображение не будет загружаться

Answer 1

вам нужно написать знак равенства вот так

 <img src={profile} alt="Profile" />