The SVG not shown using nextjs and tailwind
Answered
Barbary Lion posted this in #help-forum
Barbary LionOP
My component:
My tailwind.config.js:
but my background SVG not shown and idk what should i do, please help.
export const Hero = () => {
return (
<section className="w-full flex xl:flex-row flex-col justify-center min-h-screen p-2 max-container gap-10">
<div className="relative flex-1 flex justify-center items-center xl:min-h-screen max-xl:py-40 bg-[#FAE3E5] bg-hero bg-cover bg-center">
<Image
src={brauza}
width={550}
height={550}
className="object-contain relative z-10"
/>
</div>
</section>
);
}; My tailwind.config.js:
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
backgroundImage: {
hero: "url('../../public/images/collection-background.svg')",
card: "url('../../public/images/thumbnail-background.svg')",
},
screens: {
wide: "1440px",
},
},
},
};but my background SVG not shown and idk what should i do, please help.
Answered by riský
backgroundImage: {
hero: "url('/images/collection-background.svg')",
card: "url('/images/thumbnail-background.svg')",
},23 Replies
backgroundImage should be
/images/collection-background.svg if stored in the folder /public/images/collection-background.svg (/public is the root dir - same directory as nextconfig)the reason for this is that tailwind just uses css and the browser does a req to that url and it doesn't exist - public folder makes everything inside of it, directly on the root dir of website
@riský the reason for this is that tailwind just uses css and the browser does a req to that url and it doesn't exist - public folder makes everything inside of it, directly on the root dir of website
Barbary LionOP
I moved it to another folder and the same
backgroundImage: {
hero: "url('/images/collection-background.svg')",
card: "url('/images/thumbnail-background.svg')",
},Answer
Barbary LionOP
should i rebuild it?
and does your public folder have a folder of
images and inside that the file: collection-background.svg and thumbnail-background.svg?@Barbary Lion should i rebuild it?
wdym by rebuild?
Barbary LionOP
yeah!
@riský wdym by rebuild?
Barbary LionOP
i mean detroy the project and code it again
destroy*
if you manualy go to your website and that pathname show the image
Barbary LionOP
like in browser
http://localhost:3000/images/thumbnail-background.svgand if you inspect element on that code, does the css have said url in it
Barbary LionOP
we did dude! finally
so it works now!
Barbary LionOP
yeah bud, thank you sm â¤ï¸
ig you can mark as solved 🙂
@riský ig you can mark as solved 🙂
Barbary LionOP
how can i mark solved? using correct mark as a reaction right?
Original message was deleted