Проблема с рендерингом изображения в React JS - PullRequest
0 голосов
/ 10 января 2019

по какой-то причине мое изображение из штата не отображается на моей веб-странице в 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.log("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.log(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.log("hsbds",movieRows)

    this.state = {
      rows: movieRows
    }
  }


  handleSearch =(e)=> {
    e.preventDefault();
    const searchTerm= e.target.elements.input.value;
    console.log(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 | конст фильмы = [

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:" Мстители ", обзор:" 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 ", обзор:" 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 | ];

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...