Next.js引入图片在styled-components背景图使用时报ERR_UNKNOWN_URL_SCHEME错误

报错原因 #

Next.js 13及以上版本中，本地图片资源导入后默认返回的是包含src、width、height属性的对象，而非直接的资源URL字符串。
你使用Image组件时组件会自动读取对象的src属性完成渲染，但直接将导入对象传入background-image: url()时，对象会被自动转为字符串，最终生成包含src:前缀、宽高后缀的非法URL，触发net::ERR_UNKNOWN_URL_SCHEME报错。

解决方案 #

方案1：直接取导入对象的src属性

修改样式文件中传入url()的变量，主动读取导入图片对象的src属性即可：

// styles.tsx 改动部分
.swiper-button-prev {
  /* 新增.src后缀 */
  background-image: url(${Left.src});
  /* 其余样式保持不变 */
}
.swiper-button-next {
  /* 新增.src后缀 */
  background-image: url(${Right.src});
  /* 其余样式保持不变 */
}

如果TypeScript出现类型报错，可以在项目类型声明文件（如env.d.ts或next-env.d.ts）中添加svg资源的类型定义：

declare module '*.svg' {
  const content: {
    src: string;
    height: number;
    width: number;
  };
  export default content;
}

方案2：将静态资源放入public目录

将src/assets下的svg文件移动到项目根目录的public/assets文件夹下，无需导入资源，直接写绝对路径即可：

// 不需要再写 import Left/Right 导入语句
.swiper-button-prev {
  background-image: url('/assets/left.svg');
}
.swiper-button-next {
  background-image: url('/assets/right.svg');
}

方案3：修改webpack配置让svg导入直接返回URL

如果你希望所有svg导入都直接返回URL字符串，可以在next.config.js中添加webpack配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      type: 'asset/resource',
    });
    return config;
  },
}

module.exports = nextConfig

配置完成后重启项目，原有写法background-image: url(${Left})即可正常运行。

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