Tailwind CSS + Next.js：伪元素无法渲染本地图片问题

我正在使用Tailwind CSS和Next.js开发项目，遇到了无法解决的问题：尝试用伪元素::before和::after渲染两张本地图片，但图片无法显示；使用网络URL时图片加载正常。

相关代码 #

tailwind.config.js #

module.exports = {
    content: ["./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}"],
    theme: {
        extend: {
            content: {
                lianeG: 'url("/assets/images/lianeG.svg")',
                lianeD: 'url("/assets/images/lianeD.svg")',
            },
            // URL from internet -> it works.
            // content: {
            //     lianeG: 'url("https://picsum.photos/100")',
            //     lianeD: 'url("https://picsum.photos/100")',
            // },
        },
    },
    plugins: [],
};

header.js #

import Image from "next/image";
import bouncyMoki from "../assets/images/bouncyMoki.svg";

export default function Header() {
    return (
        <div className="relative before:content-lianeG after:content-lianeD before:absolute before:top-0 before:left-0 after:absolute after:top-0 after:right-0 after:inline-block after:size-40">
            <div className="flex justify-around p-5 bg-[#F5F3E2]">
                <Image src={bouncyMoki} className="size-12 animate-bouncy-move" alt="Bouncy Moki" />
            </div>
            <div>
                <nav className="bg-[#276B4D] mx-auto m-5 p-2 font-poppins font-medium text-white">
                    <ul className="flex justify-around">
                        <li className="p-5">
                            <a href="#monkeysGif ">Monkeys Gifs</a>
                        </li>
                        <li className="p-5">
                            <a href="#trendyGif">Trending Gifs</a>
                        </li>
                        <li className="p-5">
                            <a href="#fishesGif">Fishes Gifs</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    );
}

报错信息 #

页面刷新时终端出现404错误：

GET /assets/images/lianeG.svg 404 in 16ms
GET /assets/images/lianeD.svg 404 in 14ms

补充信息 #

• ::before和::after元素已在HTML中生成，但未显示本地图片
• 尝试过多种路径及全局CSS配置，均未解决

解决方案更新 #

更新：问题已解决，感谢Karson Jo提供的方案——CSS加载的SVG需放在public文件夹中，路径使用相对路径。我创建Next.js项目时删除了public文件夹，重建该文件夹并放入图片后问题解决。

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