[英]Why SVG is not rendered in NEXTJS project after deploying on vercel
I had created a showcase single page nextJS application styled with Tailwind CSS.我创建了一个使用 Tailwind CSS 样式的展示单页 nextJS 应用程序。 I am adding the background of a component SectionWrapper
as an svg
file.我将组件SectionWrapper
的背景添加为svg
文件。
I had created a custom class in global.css
using @layer
utility like this我在global.css
中创建了一个自定义类,使用像这样的@layer
实用程序
@layer components {
.banner {
@apply bg-[url('../assets/banner.svg')] bg-no-repeat w-full bg-cover bg-center h-full;
}
.banner02 {
@apply bg-[url('../assets/banner02.svg')] bg-no-repeat w-full bg-cover bg-center h-full;
}
.
.
}
And using them in my index.js
like this where I'm passing banner
as props.并像这样在我的index.js
中使用它们,我将banner
作为道具传递。
.
.
.
<Sectionwrapper
title="Creative way to showcase the store"
description="The app contains two screens. The first screen list all NFTs while the second shows the details of a specific NFT."
mockupImg={assets.mockup.src}
banner="banner02"
/>
.
.
.
And in sectionWrapper
component, it is used as ${banner}
in the first div.而在sectionWrapper
组件中,它在第一个 div 中用作${banner}
。
import React from "react";
import assets from "../assets";
import Button from "./Button";
const Sectionwrapper = ({
title,
description,
showBtn,
banner,
mockupImg,
reverse,
}) => {
return (
<div
className={`min-h-screen flex justify-center items-center p-16 sm:p-8 ${banner} ${
reverse ? "bg-white" : "bg-primary"
}`}
>
<div
className={`flex items-center w-11/12 sm:w-full minmd:w-3/4 ${
reverse
? "flex-row-reverse md:flex-col-reverse fadeRightMini"
: "flex-row md:flex-col fadeLeftMini"
} `}
>
.
.
.
</div>
</div>
</div>
);
};
export default Sectionwrapper;
The SVGs are working fine in the local environment. SVG 在本地环境中运行良好。 But on the deployed environment of Vercel
and Netlify
, the SVG is not rendering.但是在Vercel
和Netlify
的部署环境中,SVG 没有渲染。 It is working fine in localhost but not in production.它在本地主机中运行良好,但在生产中却不行。
in local env在本地环境中
on vercel/netlify在 Vercel/netlify 上
Moving the SVGs to the public
folder and updating thier path in tailwind.config.js
to this将 SVG 移动到public
文件夹并将tailwind.config.js
中的路径更新为此
@layer components {
.banner {
@apply bg-[url('/banner.svg')] bg-no-repeat w-full bg-cover bg-center h-full;
}
.banner02 {
@apply bg-[url('/banner02.svg')] bg-no-repeat w-full bg-cover bg-center h-full;
}
.
.
}
works for me.为我工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.