React 不從 url 加載圖像

Question

新手反應，

我正在構建一個小型反應應用程序，並且無法加載來自網絡的圖像。 嘗試像在 titleBar 中那樣加載本地 svg，但也無法加載。 我在const里面做這個過程的問題是什么？

主要目的是從 tmdb API 獲取信息並將它們加載到應用程序中。

圖片

應用程序.js

import React from 'react';

import './App.css';

function App() {

  console.log("Test")


  const movies = [
    {id: 0, poster_src: "https://image.tmdb.org/t/p/w500/kqjL17yufvn9OVLyXYpvtyrFfak.jpg", title: "Batman 1", overview: "Batman is the secret identity of Bruce Wayne.Witnessing the murder of his parents as a child leads..."},
    {id: 1, poster_src: "https://image.tmdb.org/t/p/w500/kqjL17yufvn9OVLyXYpvtyrFfak.jpg", title: "Spiderman 2", overview: "Spider-Man centers on student Peter Parker (Tobey Maguire) who, after being bitten by a genetically-altered spider, gains superhuman strength and the spider-like ability to cling to any surface. He vows to use his abilities to fight crime, coming to understand the words of his beloved Uncle Ben: With great power comes great responsibility."},


  ]

  var movieRows = []
  movies.forEach((movies) => {
    console.log(movies.poster_src);
    const movieRow = <table key={movies.id}>
      <tbody>
        <tr>
          <td>
            <img alt="poster" width="80" scr={movies.poster_src}></img> 
          </td>
          <td width="400">
            {movies.title}
            <p>{movies.overview}</p>
          </td>
        </tr>
      </tbody>
    </table>
    movieRows.push(movieRow)
  })


  return (
    <div >
        <table className="titleBar">
          <tbody>
            <tr>
              <td>
                <img alt="app icon" width="50" src={require("./img/popcorn.svg")} ></img>
              </td>
              <td width="8"></td>
              <td>
                <h1>Movies DB</h1>
              </td>
            </tr>
          </tbody>
        </table>

        <input style={{
          fontSize: 24,
          display: "block",
          width: "99%",
          paddingTop: 8,
          paddingBottom : 8,
          paddingLeft : 22

        }}
        placeholder = "Enter Movie"/>

        {movieRows}

    </div>
  );
}

export default App;

Answer 1

您需要使用src屬性，而不是scr 。 這是一個問題：

<img alt="poster" width="80" scr={movies.poster_src}></img>

應該是<img alt="poster" width="80" src={movies.poster_src}></img>

Answer 2

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {

  console.log("Test")


  const movies = [
    {id: 0, poster_src: "https://image.tmdb.org/t/p/w500/kqjL17yufvn9OVLyXYpvtyrFfak.jpg", title: "Batman 1", overview: "Batman is the secret identity of Bruce Wayne.Witnessing the murder of his parents as a child leads..."},
    {id: 1, poster_src: "https://image.tmdb.org/t/p/w500/kqjL17yufvn9OVLyXYpvtyrFfak.jpg", title: "Spiderman 2", overview: "Spider-Man centers on student Peter Parker (Tobey Maguire) who, after being bitten by a genetically-altered spider, gains superhuman strength and the spider-like ability to cling to any surface. He vows to use his abilities to fight crime, coming to understand the words of his beloved Uncle Ben: With great power comes great responsibility."},


  ]

  var movieRows = []
  movies.forEach((movie) => {
    debugger;
    console.log(movie.poster_src);
    const movieRow = <table key={movie.id}>
      <tbody>
        <tr>
          <td>
            <img alt="poster" width="80" src={movie.poster_src}></img> 
          </td>
          <td width="400">
            {movie.title}
            <p>{movie.overview}</p>
          </td>
        </tr>
      </tbody>
    </table>
    movieRows.push(movieRow)
  })


  return (
    <div >
        <table className="titleBar">
          <tbody>
            <tr>
              <td>
                <img alt="app icon" width="50" src={require("./logo.svg")} ></img>
              </td>
              <td width="8"></td>
              <td>
                <h1>Movies DB</h1>
              </td>
            </tr>
          </tbody>
        </table>

        <input style={{
          fontSize: 24,
          display: "block",
          width: "99%",
          paddingTop: 8,
          paddingBottom : 8,
          paddingLeft : 22

        }}
        placeholder = "Enter Movie"/>

        {movieRows}

    </div>
  );
}`enter code here`

export default App;