React styled-components图片路径无法加载，是否为组件问题？

这不是styled-components的问题，核心是React项目（尤其是Create React App这类脚手架）的资源路径解析规则导致的，和styled-components无关。你的代码里的路径写法不符合项目资源处理逻辑，所以图片加载失败。

正确的解决方法有两种： #

1. 先导入图片资源，再在样式中引用

在React项目中，通过import导入图片资源后，脚手架会自动处理资源路径，生成编译后的正确URL。修改代码如下：

import styled from "styled-components";
import mainImage from './assets/main.jpg'; // 导入图片

export default function App() {
  const Main = styled.div`
    height: 100vh;
    background: center / cover no-repeat url(${mainImage});
    background-color: grey;
  `;
  // 其他代码不变...
}

2. 将图片放在public目录下，使用根路径引用

如果不想通过import导入，可以把assets文件夹放到项目根目录的public文件夹中，然后直接使用根路径引用：

const Main = styled.div`
  height: 100vh;
  background: center / cover no-repeat url("/assets/main.jpg");
  background-color: grey;
`;

为什么原来的路径不行？ #

• ./assets/main.jpg：这个路径是相对于App.js所在的src目录，但React编译后，资源会被打包到输出目录，源码目录的相对路径不再有效。
• ../src/assets/main.jpg：编译后的项目中不会保留src目录，这个路径自然无法找到资源。

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