React内联样式设置背景图片路径失效问题求助

• 问题核心：React JS文件中的内联样式路径解析逻辑和CSS文件不同，直接用相对路径会导致资源找不到。

解决方案1：导入图片文件后使用（推荐） #

在pokemon.js开头先导入目标图片，webpack会自动处理资源路径：

import pokeball from '../media/pokeball.png';

然后修改状态中的背景图片配置：

const [favStyleButton, setFavStyleButton] = useState({
    width: "100px",
    height: "100px", // 移除多余空格
    backgroundImage: `url(${pokeball})`,
    backgroundSize: "contain",
    backgroundColor: "transparent",
    border: "none",
});

解决方案2：使用根相对路径（适用于图片在public目录的情况） #

如果你的media文件夹放在项目的public目录下，直接用根路径引用即可：

const [favStyleButton, setFavStyleButton] = useState({
    width: "100px",
    height: "100px",
    backgroundImage: "url('/media/pokeball.png')",
    backgroundSize: "contain",
    backgroundColor: "transparent",
    border: "none",
});

补充说明 #

CSS文件中的相对路径是基于CSS文件自身位置解析的，所以../media能生效；但React内联样式的URL最终是相对于浏览器加载的HTML页面根路径，或者需要通过webpack的资源导入机制来生成正确的打包后路径，这就是直接写相对路径失效的原因。

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