React doesnt load image from url

Question

Newbie to React,

I am building a small react app and images from web won't load. Tried to load a local svg as I do in the titleBar, but wont load too. Is the problem that I do the process inside a const?

The main puprose is to get the info from the tmdb API and load them in the app.

Image

App.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

you need to use src attribute, not scr . Here is an issue:

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

should be <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;