[英]React doesnt load image from url
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.
尝试像在 titleBar 中那样加载本地 svg,但也无法加载。 Is the problem that I do the process inside a const?
我在const里面做这个过程的问题是什么?
The main puprose is to get the info from the tmdb API and load them in the app.主要目的是从 tmdb API 获取信息并将它们加载到应用程序中。
App.js应用程序.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;
you need to use src
attribute, not scr
.您需要使用
src
属性,而不是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>
应该是
<img alt="poster" width="80" src={movies.poster_src}></img>
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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.