在styled-components中如何引入public文件夹图片设置background-image

安全阿岳

2026-10-1

错误原因

你两种写法的核心问题都是变量解析时机不对：

第一种写法里 import 语句的路径必须是静态字符串，不能直接拼接运行时变量 process.env.PUBLIC_URL，导入语句会直接把你写的整段当成路径字符串去查找文件，自然找不到。
第二种写法里你把 process.env.PUBLIC_URL 写在了css模板的字符串引号内部，不会被当成JS变量解析，最终生成的路径就是字面量的process.env.PUBLIC_URL + /images/background.svg，肯定无法匹配到正确资源。

正确实现1：直接在CSS模板内拼接路径

不需要提前导入图片，直接把路径拼接逻辑放在 ${} 中注入到css模板里：

import styled from "styled-components";

export const HomeContainer = styled.section`
  height: 100vh;
  max-width: 100vw;
  /* 把变量拼接逻辑放在${}中，不要套在css的url引号里 */
  background-image: url(${`${process.env.PUBLIC_URL}/images/background.svg`});
  background-repeat: no-repeat;
  background-size: cover;
`;

正确实现2：提前在JS逻辑中定义路径变量

如果需要复用路径，可以提前在JS作用域里拼好路径再传入：

import styled from "styled-components";

// 在JS逻辑中完成路径拼接
const backgroundUrl = `${process.env.PUBLIC_URL}/images/background.svg`

export const HomeContainer = styled.section`
  height: 100vh;
  max-width: 100vw;
  background-image: url(${backgroundUrl});
  background-repeat: no-repeat;
  background-size: cover;
`;