ReactJS中img src不响应 电影海报无法正常显示问题排查

海报无法渲染是两处代码错误直接导致的：

• Array.map 回调使用大括号包裹逻辑时，没有显式返回<img>节点，React无法获取待渲染的内容，不会生成对应的图片DOM
• 拼接图片src地址时错误使用单引号包裹模板字符串，模板语法仅在反引号（）包裹的字符串中生效，使用单引号时${变量}`会被识别为普通文本，最终拼接出的图片地址完全无效。

另外你的列表渲染缺少必填的key属性，会触发React控制台警告，部分TMDB返回的影片没有name字段、只有title字段，直接取movie.name会导致alt属性为空。

import React, { useEffect, useState } from 'react';
import axios from './axios';
const base_URL = "https://image.tmdb.org/t/p/original";
function Row({title, fetchUrl}) {
    const [movies, setMovies] = useState([]);
    useEffect(() => {
        async function fetchData() {
            const request = await axios.get(fetchUrl);
            setMovies(request.data.results);
            return request;
        }
        fetchData();
    }, [fetchUrl]);

  return (
    <div className="row">
      <h2>{title}</h2>
      <div className="row__posters">
        {movies.map(movie => {
          return (
            <img
              key={movie.id}
              src={`${base_URL}${movie.poster_path}`}
              alt={movie.name || movie.title}
            />
          )
        })}
      </div>
    </div>
  )
}
export default Row

替换代码后刷新页面即可正常加载海报。

内容的提问来源于stack exchange，提问作者Abhishek Trivedi