Проблема с рендерингом изображения в React JS

по какой-то причине мое изображение из состояния не отображается на моей веб-странице в ReactJS.

Я пробовал использовать movie.poster_src, но все равно выдает ошибку. Также искали, как вытащить изображения из состояния для рендеринга на странице

import React, { Component } from 'react';
import './App.css';
import {Button} from "react-bootstrap"

class App extends Component {

  constructor(props) {
    super(props);
    console.info("This is my initializer");

    const movies = [
      { id: 0, poster_src = "https://www.sideshowtoy.com/wp-content/uploads/2018/08/dc-comics-batman-statue-sideshow-prime1-studio-feature-2005181-2.jpg", title:"Avengers", overview: "dfnkjsnknsdfnjksdnfjkdsnfkjnsdf"},
      { id: 1, poster_src = "https://www.sideshowtoy.com/wp-content/uploads/2018/08/dc-comics-batman-statue-sideshow-prime1-studio-feature-2005181-2.jpg", title:"Supermsan", overview: "knsjkdsnkjfnjkdsnfkjsndfj"},
      { id: 2, poster_src = "https://www.sideshowtoy.com/wp-content/uploads/2018/08/dc-comics-batman-statue-sideshow-prime1-studio-feature-2005181-2.jpg"}
    ];
    this.state = {
      rows: [
      <p key = "0">This is my row0</p>,
      <p key = "1">This is my row1</p>,
      <p key = "2">This is my row2</p>
    ]}


    const movieRows = []; 

    movies.forEach((movie)=> {
      console.info(movie.id);
      const movieRow = 
      <table key = {movie.id}>
        <tbody>
          <tr>
            <td>
              <img src = {movie.poster_src} alt = "image"/>
            </td>
            <td>
              {movie.title}
            </td>
          </tr>
        </tbody>
      </table>
      movieRows.push(movieRow);
    })
    console.info("hsbds",movieRows)

    this.state = {
      rows: movieRows
    }
  }


  handleSearch =(e)=> {
    e.preventDefault();
    const searchTerm= e.target.elements.input.value;
    console.info(searchTerm);
  }

  render() {
    return (
      <div className = "App">
       <table className = "tableStyle">
         <tbody>
           <tr>
             <td>
               <img alt = "app icon" className = "moviesLogo" src = "http://pluspng.com/img-png/movie-png-hd-http-www-indigital-co-in-upload-channellogo-1696.png"/>
             </td>
             <td width = {8}/>
             <td className = "logoText">
               <h2>MoviesNow Search</h2>
             </td>
           </tr>
         </tbody>
       </table>
       <form className = "formStyle" onSubmit = {this.handleSearch}>
        <input name = "input" className = "inputStyle" placeholder = "Enter movie title" />
        <Button type = "submit" bsStyle = "warning" className = "searchButtonStyle">Search</Button>
       </form>
       {this.state.rows}
      </div>
    );
  }
}

export default App;

Я хочу, чтобы изображение отображалось. Но у меня ошибка:

./src/App.js Строка 12: ошибка анализа: неожиданный токен

10 | 11 | const movies = [

12 | { id: 0, poster_src = "https://www.sideshowtoy.com/wp-content/uploads/2018/08/dc-comics-batman-statue-sideshow-prime1-studio-feature-2005181-2.jpg", title:"Avengers", overview: "dfnkjsnknsdfnjksdnfjkdsnfkjnsdf"}, | ^ 13 | { id: 1, poster_src = "https://www.sideshowtoy.com/wp-content/uploads/2018/08/dc-comics-batman-statue-sideshow-prime1-studio-feature-2005181-2.jpg", title:"Supermsan", overview: "knsjkdsnkjfnjkdsnfkjsndfj"}, 14 | { id: 2, poster_src = "https://www.sideshowtoy.com/wp-content/uploads/2018/08/dc-comics-batman-statue-sideshow-prime1-studio-feature-2005181-2.jpg"} 15 | ];

`poster_src = " `должно быть poster_src: "

Ori Drori 09.01.2019 22:40

просто замените = на: после poster_src

Gábor Huszák 09.01.2019 22:41

ух ты. Огромное спасибо! Понятно!

Kenny Quach 09.01.2019 22:44
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
140
0

Другие вопросы по теме