offline image is not working while online url works

Question

When I use the online URL for the image then it works perfectly and the image was coming on the page but when I use the offline image from my folder then it doesn't work. I am using pug. This below is the full HTML code I am using

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About</title>
    style
        include AboutPageStyle.css 
</head>
<body>
    <section id="Photo">
        <div> 
        </div>
    </section>
    <section>
        <ul id="Education">
            <li class="line"></li>
            <li>Education</li>
            <li class="line"></li>
        </ul>
    </section>
    <section id="Container">
        <div id="SideImage"></div>
        <div>
            <ul class="list">
                <li>National Institue of Technology-Kurukshetra</li>
                <li style="font-size: 0.7rem; color: #cb8c2e;">B.tech in Producation and Industrial Engineering,2020-2024</li>
                <li style="font-size: 0.9rem;color: green;">Haryana,Kurukshetra </li>
                <li style="font-size: 0.8rem; font-weight: 400;">Learning and achievements from Institue</li>
                <li style="font-size: 0.8rem; font-weight: 400;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error facilis laboriosam tenetur perferendis, doloremque impedit ea ad odit nostrum ratione quisquam quis nam eligendi, eius cupiditate ipsum, optio ex reprehenderit? Harum beatae voluptatem dicta.</li>
                <li style="font-size: 0.8rem; font-weight: 400;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod mollitia suscipit cumque ullam ipsam delectus, pariatur velit deleniti inventore. Cum.</li>
                <li style="font-size: 0.8rem; font-weight: 400;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, quas.</li>
                <li style="font-size: 0.8rem; font-weight: 400;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut natus ullam sed doloremque aliquid veritatis? Neque consequuntur nostrum reprehenderit asperiores nulla inventore molestiae iste at provident quisquam magnam incidunt exercitationem similique distinctio voluptas ea, obcaecati eius eveniet beatae veritatis? Voluptatibus est omnis eaque aut quas accusantium sed dolore, natus maxime.</li>
            </ul>
        </div>
    </section>
    <section id="Container">
        <div id="SideImage"></div>
        <div>
            <ul class="list">
                <li>Sanskar Science Academy</li>
                <li style="font-size: 0.7rem; color: #cb8c2e;">Higher Senior Secondary</li>
                <li style="font-size: 0.9rem;color: green;">Jhunjhunu,Rajasthan</li>
                <li style="font-size: 0.8rem; font-weight: 400;">Learning and achievements from Institue</li>
                <li style="font-size: 0.8rem; font-weight: 400;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error facilis laboriosam tenetur perferendis, doloremque impedit ea ad odit nostrum ratione quisquam quis nam eligendi, eius cupiditate ipsum, optio ex reprehenderit? Harum beatae voluptatem dicta.</li>
                <li style="font-size: 0.8rem; font-weight: 400;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod mollitia suscipit cumque ullam ipsam delectus, pariatur velit deleniti inventore. Cum.</li>
                <li style="font-size: 0.8rem; font-weight: 400;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, quas.</li>
                <li style="font-size: 0.8rem; font-weight: 400;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut natus ullam sed doloremque aliquid veritatis? Neque consequuntur nostrum reprehenderit asperiores nulla inventore molestiae iste at provident quisquam magnam incidunt exercitationem similique distinctio voluptas ea, obcaecati eius eveniet beatae veritatis? Voluptatibus est omnis eaque aut quas accusantium sed dolore, natus maxime.</li>
            </ul>
        </div>
    </section>
       <section>
        <ul id="Education">
            <li class="line"></li>
            <li>Working On</li>
            <li class="line"></li>
        </ul>
    </section>  
    <section class="Workingon">
      <ul id="Mylists">
        <li>This is first list</li>
        <li>This is second list</li>
        <li>This is third list</li>
        <li>This is fourth list</li>
      </ul>
    </section>
    </section>
    <section style="height: 300px;"></section>
</body>
</html>

Below is the CSS code I am using


body{
    margin: 0px;
    padding: 0px;
    background-color: rgb(41, 41, 66);
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
#Photo{
    width: 100%;
    height: 400px;
    background-color: blueviolet;

}
#SideImage{
    width: 300px;
    height: 150px;
    border-radius: 5px;
    /* background-image: url('https://img.collegepravesh.com/2014/04/NIT-Kurukshetra.jpg'); */   
    /* This line works perfectly*/
    /* background-image: url('Flower.jpg');    Neither this */   
    /* background-image: url('../Flower.jpg');  This also not works */
    /* background-image: url('Flower.jpg');    Neither this */
    object-fit: fill;

}
#Container{
    display: flex;
    margin-top: 50px;
    justify-content: center;
    margin-left: 150px;
    margin-right: 150px;
   
}
.list{
    list-style:none;
    margin:1px;
    font-weight: bold;
 

}
.list li{
    padding: 3px;
}

.line{
    width: 85px;
    height: 2px;
    background-color: white;
    margin-top:1.05rem;
    margin-left: 7px;
    margin-right: 7px;
}
#Education{
    display: flex;
    list-style: none;
    justify-content: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.8rem;
}
.Workingon{
   width: 95%;
   height: 500px;
   background-color: rgb(41, 41, 66);
   display: block;
   margin: auto;
}
#Mylists{
    display: grid;
    grid-template-columns: 48% 48%;
    height: 230px;
    grid-gap: 20px;
   
}
#Mylists li{
       height: 230px;
       background-color: rgb(24, 30, 40);
       border-radius: 5px;
       list-style: none;
       box-shadow: inset 2px 1px 2px 2px #2f3136;
      
}

I am also attaching an image for where my image is located. My all other files are located inside views folder.

Answer 1

Try this

Here you must use a javascript building function navigator.onLine . Which first optimizes whether the user is online or offline. Using this you can add multiple backgrounds.

It gives out if user is only value = true
If offline value = False

Here's an example for that test it in both Online and offline situation which will make you understand more deeply.

Check out My Codepen theirs an example

Click here to see the Source Code

OR

offline image is not working while online url works

Question

1 answers

solution1
0 2022-01-16 17:25:01

Try this

Check out My Codepen theirs an example

Make a different directory/folder for all the images and mention the path correctly

offline image is not working while online url works

Question

1 answers

solution1 0 2022-01-16 17:25:01

Try this

Check out My Codepen theirs an example

Make a different directory/folder for all the images and mention the path correctly

solution1
0 2022-01-16 17:25:01