调用TMDB API展示图片无报错不渲染，VS Code替换反引号失败如何解决

1. 图片无法正常渲染的原因及修复 #

你当前代码中src属性用双引号包裹模板字符串语法，双引号不会解析${}插值逻辑，会直接把内容当做字面量字符串赋值给src，因此无法生成正确的图片地址。
有两种可选的正确写法：

方案A：使用模板字符串（需用反引号包裹） #

src={`${base_url}${isLargeRow ? movie.poster_path : movie.backdrop_path}`}

方案B：直接字符串拼接（无需反引号，可避免格式化冲突） #

src={base_url + (isLargeRow ? movie.poster_path : movie.backdrop_path)}

额外优化建议：

• 给map遍历的img标签添加唯一key属性，避免React控制台抛出警告：

  {movies.map((movie) => (
    <img
      key={movie.id}
      // 其余属性保持不变
    />
  ))}
  

• 增加空值兜底，避免部分电影缺少对应字段导致裂图：

  src={base_url + (isLargeRow ? (movie.poster_path || movie.backdrop_path) : (movie.backdrop_path || movie.poster_path))}
  

2. VS Code保存自动将反引号替换为双引号的解决方法 #

该问题由编辑器格式化规则配置异常导致，可按以下步骤排查修复：

• 检查项目根目录下的格式化配置文件（比如.prettierrc、.eslintrc等），是否配置了JSX属性强制使用双引号的规则：
  • 如果使用Prettier，确认配置中没有错误限制模板字符串的规则，可添加配置"jsxSingleQuote": false放宽JSX引号限制
  • 如果使用ESLint，检查jsx-quotes规则是否设为了"prefer-double"，可调整为"prefer-single"或者直接关闭该规则对模板字符串的校验
• 如果不想修改格式化规则，直接使用上面提到的字符串拼接方案写src属性即可，无需使用反引号就能实现相同的拼接效果
• 临时验证：可以先禁用当前项目的格式化插件保存自动格式化功能，修改代码后看是否还会被替换，确认是格式化插件导致的问题后再针对性调整规则

内容的提问来源于stack exchange，提问作者Sudip Giri