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;