Next-引入静态资源,背景图引入不显示?

报错:GET http://localhost:3000/public/images/painting-img/banner_1.png 404 (Not Found)

// 
export default async function Page() {
    return (
        <div className="painting" 
            style={{ backgroundImage: "url(/public/images/painting-img/banner_1.png)" }}
        >
            背景图
        </ div>
    )
}

我的路径是按照文件结构引入的，仍然不行，

原因： 使用 Next.js 的 public 文件夹

• 在 Next.js 中，所有放在 public 目录中的文件都会自动作为静态资源提供，使用时不需要在路径中包含 public 目录。就像我的图片位于 public/images/background.jpg，只需要引用 /images/background.jpg。就搞定了~~~

// 
export default async function Page() {
    return (
        <div className="painting"
            style={{
                backgroundImage: "url(/images/painting-img/banner_1.png)",
                backgroundRepeat: "no-repeat"
            }}
        >
            背景图
        </ div >
    )
}

奈斯儿~