时间戳

首页 > 解决方案 > 试图建立一个电影网站，但电影海报没有出现

javascript - 试图建立一个电影网站，但电影海报没有出现

问题描述

我试图将图像放在电影应用程序上，但看起来它不起作用。

我完全不知道我在代码中做错了什么。

那么，有没有人可以帮我找到错误的零件？

谢谢 ！

App.js 内部：

import React, { Component } from 'react';
import './App.css';
import Movie from './Movie';

const movieTitles = [
  "Matrix",
  "Full Metal Jacket",
  "Oldboy",
  "Star Wars"
]

const movieImages = [
  "https://m.media-amazon.com/images/M/MV5BNzQzOTk3OTAtNDQ0Zi00ZTVkLWI0MTEtMDllZjNkYzNjNTc4L2ltYWdlXkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_.jpg",
  "https://m.media-amazon.com/images/M/MV5BNzkxODk0NjEtYjc4Mi00ZDI0LTgyYjEtYzc1NDkxY2YzYTgyXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_.jpg",
  "https://file.mk.co.kr/meet/neds/2016/08/image_readtop_2016_598718_14719314482590048.jpg",
  "https://images-na.ssl-images-amazon.com/images/I/51bvrRm3toL._SY445_.jpg"
]

class App extends Component {
  render() {
    return (
      <div className="App">
        <Movie title={movieTitles[0]} poster={movieImages[0]} />
        <Movie title={movieTitles[1]} poster={movieImages[1]} />
        <Movie title={movieTitles[2]} poster={movieImages[2]} />
        <Movie title={movieTitles[3]} poster={movieImages[3]} />
      </div>
    );
  }
}

export default App;

在 Movie.js 中：

import React, { Component } from 'react';
import './Movie.css';

class Movie extends Component {
    render(){
        return (
            <div>
                <MoviePoster poster={this.props.poster} />
                <h1>{this.props.title}</h1>
            </div>
        )
    }
}

class MoviePoster extends Component {
    render(){
        return (
            <img src={this.props.posetr} />
        )
    }
}

export default Movie;

这些是我写的。如果有人可以帮助我，我将不胜感激！谢谢你。

标签： javascriptreactjs

解决方案

class MoviePoster extends Component {
    render(){
        return (
            <img src={this.props.posetr} />
        )
    }
}

你写了posetr而不是海报）

推荐阅读