search

adrianhajdin / brainwave

Learn to create modern websites with sleek parallax effects and bento box layouts. This course covers everything from stylish UI design to mobile-first principles while strengthening your React.js and Tailwind CSS skills.
https://jsm-brainwave.com
1.53k stars 448 forks source link

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

Open GaijinShacho opened 7 months ago

GaijinShacho commented 7 months ago

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 commented 7 months ago

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

Shaheer5 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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 commented 6 months ago

  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 commented 6 months ago

Thank you so much, It worked <3.