我正在尝试显示来自TMDB API的图像，但我的代码不起作用

Question

下面的代码是用于显示不同类别的电影图像的函数。浏览器和vs代码没有显示错误，但我仍然无法得到结果。帮助

function Row({ title, fetchUrl, isLargeRow = false }) {
const [movies, setMovies] = useState([]);
const base_url = "https://image.tmdb.org/t/p/w500/";

useEffect(() => {
async function fetchData() {
const request = await axios.get(fetchUrl);
setMovies(request.data.results);
return request;
}
fetchData();
}, [fetchUrl]);

//   console.log(movies);

return (
<div className="row">
<h2>{title}</h2>

{movies.map((movie) => (
<img
// "https://image.tmdb.org/t/p/w500/" + movie.poster_path || movie.backdrop_path

src={
"${base_url}${isLargeRow ? movie.poster_path:movie.backdrop_path}"
}
alt={movie.name}
/>
))}
</div>
);
}

export default Row;

这里针对这个代码"$｛base_url｝$｛isLargeRow？movie.poster_path：movie.backrop_path｝"，我试图用backtik('(替换("(，但vs代码在保存时又替换了回来。

Answer 1

而不是：const base_url = "https://image.tmdb.org/t/p/w500/";试试这个：const base_url = "https://image.tmdb.org/t/p/w500";

请删除末尾的正斜杠，因为poster_path已具有//9PFonBhy4cQy7Jz20NpMygczOkv.jpg

Answer 2

您可以使用此syntax将一个父sis下的所有地图数据(如(

｛电影？.map((电影(=>{

let moviesDiv = (
<div className="row_posters">
<img src={`${baseURL}${movie.poster_path}`} alt={movie.name} />;
</div>
);
return moviesDiv
})}
</div>