Background img dosent show after deployment but it is visible in the localhost

Hi,

I am having trouble showing a background img in my react-app when deploying it to Netlify.

https://ubiquitous-druid-e3adce.netlify.app/

Here’s the JSX:

import { useState } from “react”;
import styles from “./Hero.module.css”; // Import your CSS file for styling

const Hero = () => {
const [height, setHeight] = useState(0);
const [weight, setWeight] = useState(0);
const [age, setAge] = useState(0);
const [bmi, setBmi] = useState(0);
const [caloriesForWeightGain, setCaloriesForWeightGain] = useState(0);
const [caloriesForWeightLoss, setCaloriesForWeightLoss] = useState(0);

const calculateBMI = () => {
// BMI calculation
const bmiValue = (weight / Math.pow(height / 100, 2)).toFixed(2);
setBmi(bmiValue);

// Calculate calories for weight gain and loss (you can use any formula here)

const bmr = 88.362 + 13.397 * weight + 4.799 * height - 5.677 * age;
setCaloriesForWeightGain(Math.round(bmr + 500));
setCaloriesForWeightLoss(Math.round(bmr - 500));

};

const getBmiRangeColor = (bmi) => {
if (bmi < 18.5) return “Underweight”;
if (bmi >= 18.5 && bmi < 24.9) return “Normal Weight”;
if (bmi >= 25 && bmi < 29.9) return “Overweight”;
return “Obese”;
};

const bmiRangeColor = getBmiRangeColor(bmi);

const handleCalculateClick = () => {
calculateBMI();
};

return (



BMI Calculator




Height (cm):
<input
type=“number”
value={height}
onChange={(e) => setHeight(e.target.value)}
/>


Weight (kg):
<input
type=“number”
value={weight}
onChange={(e) => setWeight(e.target.value)}
/>


Age:
<input
type=“number”
value={age}
onChange={(e) => setAge(e.target.value)}
/>

Calculate BMI


BMI: {bmi}


Calories for Weight Gain: {caloriesForWeightGain} Kcal/day


Calories for Weight Loss: {caloriesForWeightLoss} Kcal/day




BMI Range: {bmiRangeColor}


<div className={bmi-range-color ${bmiRangeColor.toLowerCase()}} />



);
};

export default Hero;

Here’s the CSS:

  • {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: “Poppins”, sans-serif;
    }

    .outbox{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100% !important;
    background-image: url(‘…/src/assets/image.jpg’);
    background-size: cover;
    background-position: center;
    }

    .container {
    width: 30rem;
    /* background-color: white; */
    border-radius: 30px;
    background: rgba(227, 221, 210, 0.73);
    padding: 30px;
    height: fit-content;

    }

    @media screen and (max-width: 321px) {
    .container {
    width: 18rem !important;
    /* background-color: white; */
    padding: 30px;
    height: fit-content;

    }

    .heading{
    font-size: 150% !important;
    }

    }

    @media screen and (max-width: 426px) {
    .container {
    width: 22rem;
    /* background-color: white; /
    /
    border-radius: 10px; */
    padding: 30px;
    height: fit-content;
    }
    }

    .heading{
    text-align: center;
    font-size: 200%;
    font-weight: bolder;

    }

    p{
    font-size: 20px;

    }

    /* App.css */

/* Styling for the entire BMI calculator container /
/
.bmi-calculator {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #f0f0f0;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
text-align: center;
} */

/* Styling for labels and input fields /
/
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
} */

input[type=“number”] {
width: 100%;
padding: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

/* Styling for the Calculate button */
button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;

}
.button{
text-align: center;

}
/* Styling for the BMI value, calorie information, and BMI range */
p {
margin: 10px 0;
font-weight: bold;
}

/* Styling for the color-coded BMI range indicator */
.bmi-range-color {
width: 20px;
height: 20px;
display: inline-block;
border-radius: 50%;
margin-left: 10px;
}

.underweight {
background-color: blue;
}

.normalweight {
background-color: green;
}

.overweight {
background-color: yellow;
}

.obese {
background-color: red;
}

Hey @subaash, welcome!

Can you share us a public repository?

Gr,

Andy

@subaash try moving your src/assets/ folder to the public/ folder, so it becomes public/assets/.

In your template you can then link to /assets/ without the public/ prefix.

More docs available here:

Gr,

Andy

Thank you for your help , Now it is working

1 Like

that’s awesome. Thanks for confirming.