card-1.svg to card-6.svg for the Benefits.jsx section DO NOT render on Vercel

[GaijinShacho]

The gradient "frame" svg images in the Benefits section show nicely on localhost but do not render on Vercel.

import benefitCard1 from "./benefits/card-1.svg";
import benefitCard2 from "./benefits/card-2.svg";
import benefitCard3 from "./benefits/card-3.svg";
import benefitCard4 from "./benefits/card-4.svg";
import benefitCard5 from "./benefits/card-5.svg";
import benefitCard6 from "./benefits/card-6.svg";

Please check it yourself here: https://jsm-brainwave.com/

It is a very strange bug and I cannot figure it out!

[xlgabriel]

Had the same problem with Netlify. Just change them to png and they will work! The size keeps small.

[Shaheer5]

Had the same problem with Netlify. Just change them to png and they will work! The size keeps small.

How exactly did you do it? Because I changed those images to png and update their source links but its not working.

[xlgabriel]

I used an online service to convert svg to png. Updated the images on the respective folder, and changed the format of the imports from ".svg" to ".png". Did the deploy and that's it. Show me if you get any error during this process

[Shaheer5]

Well I did the same but I don't know why its not working for me.
https://github.com/Shaheer5/brainwave, it's my repo. Please have a look. Thanks

[xlgabriel]

Well I did the same but I don't know why its not working for me. https://github.com/Shaheer5/brainwave, it's my repo. Please have a look. Thanks

Sorry for the late reply, I've been with a lot of work lately. I've seen your repo and your "card-#" files are still in .svg. I guess the change is still local but just make sure you've successfully changed the format of those files to png. The imports should look like this:

import benefitCard1 from "./benefits/card-1.png";
import benefitCard2 from "./benefits/card-2.png";
import benefitCard3 from "./benefits/card-3.png";
import benefitCard4 from "./benefits/card-4.png";
import benefitCard5 from "./benefits/card-5.png";
import benefitCard6 from "./benefits/card-6.png";

[Shaheer5]

Hi,
I'm sorry, I've done everything I could think of but its not working, can you look again or can you share repo and live page?

[BnS2]

1. It could be resolved by adding double quotes ("") in ${backgroundUrl} in Benefits.jsx:

style={{ backgroundImage: url("${backgroundUrl}") }}

2. and importing the benefitCard1 and the rest in constants/index.jsx and replace the backgroundUrl inside the benefits array:

import {
benefitCard1,
benefitCard2,
benefitCard3,
benefitCard4,
benefitCard5,
benefitCard6,
} from "../assets";

export const benefits = [
{
id: "0",
title: "Ask anything",
text: "Lets users quickly find answers to their questions without having to search through multiple sources.",
backgroundUrl: benefitCard1,
iconUrl: benefitIcon1,
imageUrl: benefitImage2,
},

refer to the documentation : https://vitejs.dev/guide/assets.html

[Shaheer5]

Thank you so much, It worked <3.

[22prerak22]

1. It could be resolved by adding double quotes ("") in ${backgroundUrl} in Benefits.jsx:

style={{ backgroundImage: url("${backgroundUrl}") }}

2. and importing the benefitCard1 and the rest in constants/index.jsx and replace the backgroundUrl inside the benefits array:

import { benefitCard1, benefitCard2, benefitCard3, benefitCard4, benefitCard5, benefitCard6, } from "../assets";

export const benefits = [ { id: "0", title: "Ask anything", text: "Lets users quickly find answers to their questions without having to search through multiple sources.", backgroundUrl: benefitCard1, iconUrl: benefitIcon1, imageUrl: benefitImage2, },

refer to the documentation : https://vitejs.dev/guide/assets.html

I was getting error in step-1 and using it like this fix it for me
style={{ backgroundImage: url("${backgroundUrl}") }}

Check my deployed webite