मैं एक वेबसाइट बना रहा हूं, जिसमें 5 पृष्ठ हैं (उदा. page1.html, page2.html, आदि और निम्नलिखित .css पत्रक)। अजीब तरह से, कुछ पृष्ठों पर छवियों का हिस्सा बिना किसी समस्या के दिखाई देता है, लेकिन अन्य नहीं। ऐसा लगता है कि समस्या पृष्ठों/फाइलों के साथ हो सकती है, क्योंकि जब मैंने दिखने वाली छवि के स्थान पर एक ही छवि को अलग-अलग HTML फ़ाइल में उपयोग करने का प्रयास किया और यह बिना किसी समस्या के दिखाया। मैंने विस्तार के साथ पूरे यूआरएल और छवि के नाम की प्रतिलिपि बनाने की कोशिश की (छवियां एचटीएमएल और सीएसएस फाइलों के समान निर्देशिका में हैं)। कोई विचार? (मैं वेबसाइट देखने के लिए क्रोम का उपयोग कर रहा हूं)

<!DOCTYPE html>
<html>
<head>
  <meta name="description"  />
  <title> "animātiō" is "bestowing of life"</title>
   <link rel="stylesheet" type="text/css" href="CW1_page1_style.css" />
  </head>
<body>
  <h1>Just a small website about animation</h1>

  <div class="container">
    <div id="menu">

        <a href="file:///C:/Users/Asia/Desktop/Uni/Semestr2/Introduction%20to%20Web%20Technologies/CW1_page0.html">Menu & Navigation</a>
        <a href="file:///C:/Users/Asia/Desktop/Uni/Semestr2/Introduction%20to%20Web%20Technologies/CW1_page1.html">History and Beginnings</a>
        <a href="file:///C:/Users/Asia/Desktop/Uni/Semestr2/Introduction%20to%20Web%20Technologies/CW1_page2.html">Traditional medium</a>
        <a href="file:///C:/Users/Asia/Desktop/Uni/Semestr2/Introduction%20to%20Web%20Technologies/CW1_page3.html">Computer animation</a>
        <a href="file:///C:/Users/Asia/Desktop/Uni/Semestr2/Introduction%20to%20Web%20Technologies/CW1_page4.html">2D or 3D: Which is Better?</a>
    </div>
  </div>

<br /><br /><br /><br />

<div>

  <section id="section-a">
    <div class="box-1">
       The first "animations" were sequences of consecutive images, which would give an illusion of movement.
       At the beginning there existed machines like Praxinoscope - series of images rotated at high speed - and Shadow plays - moving figures on a screen.
       Not to mention the technique known to every child that is a flipbook - conjuring "moving" image upon quickly flipping paper sheets.
  </div >
</section>
<section >
  <section id=section
  <p id="ex" >Examples of machines</p>
  <div class="examples">

   <img class="slide" src='magic-lantern.png' alt='Magic Lantern' />

  <img class="slide" src='zoetrope.gif' alt='Zoetrope'/>

   <img class="slide" src='flip-book.png' alt='Flip-Book'/>

    <img class="slide" src='praxinoscope.png' alt='Praxinoscope'/>


    </div>
</section>
<br />
  <section id="section-c">
    <div class-"box-2">
      The breakthrought began with the invention of motion pictures.
      Hand-drawn and painted animation was prevalent throughout the whole 20th century. From the first short movies of the silent era, to fresh creations with color and soundtrack
      animation started growing in popularity - and bringing more and more profit.
      </div>
      <div class="box-3">
        <img scr="snow-white.jpg" alt="Snow White'"/>
        The first hand-drawn animated movie - Disney's "Snow White" (1937)
        <img scr="disney.jpg" alt="Walt Disney'"/>
        Walt Disney - pioneer of American animation industry
      </div>
  </section>

<section id="section-d">
  <div class="box-3">
After addition of sound and color and subsequent success of Disney, other studios began to produce their own features. This was, no doubt, the golden years for Hollywood animation.
  </div>
  <div class="box-4">
    With the end of the 1950s and growing popolarity of television, stations began to emit various animated productions. A lot of them were cartoons aimed to kids
  </div>
  <div class="box-5">
Major animated productions from the Golden Era of American Televison feature cartoons like "The Flinstons", "Bear Yoggy"
  <br />
  <img scr="felixc.jpg" alt="Felix the Cat"/>
  <img scr="flinstones.jpg" alt="Flinstons"/>
  </div>
</section>


</div>

  </body>
</html>
body {
  background-color: beige;
  font-size: 17px;
}

 /** {
  box-sizing: border-box;
} */
h1 {
  color: #3e3e80;
  text-align: center;
}

.container {
  position: absolute;
  margin: 20px;
  width: auto;
}

#menu {
   overflow: hidden;
   background-color: green
 }

 #menu a {
   float: left;
   color: white;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   font-size: 17px;
 }
 #menu a:hover {
  color: #3e3e80;
  background-color: white;
 }

  .slide {
    float: left;
    width: 25%;
    padding: 0px;
  }

  .examples::after {
    content: "";
    clear: both;
    display: inline-flex;
  }

  #section-c {
    display : inline-flex;
  }

ऊपर का उदाहरण: यहां पहली 4 छवियां काम करती हैं, बाकी नहीं

और नीचे सब कुछ कोई समस्या नहीं दिखाई देता है:

<!DOCTYPE html>
<html>
<head>
  <meta name="description"  />
    <title> "animātiō" is "bestowing of life"</title>
    <link rel="stylesheet" type="text/css" href="CW1_page2_style.css" />
  </head>
<body>
  <h1>Just a small website about animation</h1>

  <div class="container">
    <div id="menu">

        <a href="file:///C:/Users/Asia/Desktop/Uni/Semestr2/Introduction%20to%20Web%20Technologies/CW1_page0.html">Menu & Navigation</a>
        <a href="file:///C:/Users/Asia/Desktop/Uni/Semestr2/Introduction%20to%20Web%20Technologies/CW1_page1.html">History and Beginnings</a>
        <a href="file:///C:/Users/Asia/Desktop/Uni/Semestr2/Introduction%20to%20Web%20Technologies/CW1_page2.html">Traditional medium</a>
        <a href="file:///C:/Users/Asia/Desktop/Uni/Semestr2/Introduction%20to%20Web%20Technologies/CW1_page3.html">Computer animation</a>
        <a href="file:///C:/Users/Asia/Desktop/Uni/Semestr2/Introduction%20to%20Web%20Technologies/CW1_page4.html">2D or 3D: Which is Better?</a>
    </div>
  </div>

<br /><br /><br /><br />

  <div>
    <section id="section-a">
      <div class="box-0">
      Traditional animation (hand-drawn animation) is the first type of aniamtion that have been used (not counting any machines equipped with slides).
      <br /><br />
      The oldest and used commonly throughtout most of the history of animation,
      recently this style seemed to fall out of grace in favour of computer generated images.
      However, it's still used even nowadays and has many enthusiasts.
      <br />

    </div>
    <div class='box-1'>
      <img class="im" src="aniwork1.jpg" alt="Animator working on" />
    </div >
    <div class="small-fact">
      <img class="im" src="aniwork2.jpg" alt="Animator working on" />
    </div>
    <div class="small-fact">
        Did you know: The standard number of frames is 90 per minute of the movie!
        <br /> <br />
        That makes 8100 drawings for a 90 minutes-long film!
    </div>
    </section>

  <section id="section-b">
    <div class="box-2">
      The process of creating any animated piece starts with storyboards.
       Here, delegated artists prepare rough layouts of the scene, with characters and backgrounds taken into consideration.
      <img  class="board" src="storyboard.jpg" alt="Storyboard" />
    </div>
      <div class="box-3">

       <img class="phase" src="animatic phase.gif" alt="Animatic phase form Avatar: The Last Airbender" />
The next stage is animatic phase - similar to storyboarding, but consisting of key frame (the most important parts of the particular scenes).
  <br /> <br />
  (Above: animatic phase from "Avatar: The Last Airbender")
  <br /> <br />
  (Left: Storyboards indicate on surroundings, as well as the charaters and actions.)
     </div>
    <div class="box-4">
      Afterwards, there's a need to provide the in-between, additional images which will guarantee smoothness of the animation.
      Lastly, it's only the matter of inking and coloring the pages.
        <img class="slide1" src='inking.jpg' alt='Inking a character #1' />
        <img class="slide2" src='ink-color.jpg' alt='Inked and colored character' />

    </div>

  </section>
  <section>

  <div class="examples">
  <p id="ex" >Examples of traditionally animated features</p>
    <img class="pink" src='pinkp.jpg' alt='The Pink Panther'/>
     <img class="pi" src='pinoccio.jpg' alt='Pinoccio'/>
      <img class="lion" src='lion_king.webp' alt='The Lion King'/>
      <img class="eldorado" src='eldorado.jpg' alt='Road to El Dorado'/>


  </div>

</section>
  </body>
</html>
body {
  background-color: beige;
  font-size: 17px;
}
h1 {
  color: #3e3e80;
  text-align: center;
}

.container {
  position: absolute;
  margin: 20px;
  width: auto;
}

#menu {
   overflow: hidden;
   background-color: brown;
 }

 #menu a {
   float: left;
   color: white;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   font-size: 17px;
 }
 #menu a:hover {
  color: #3e3e80;
  background-color: white;
 }


  #section-a {
    display: flex;
  }
  #section-a .box-0{
      float: left;
      width: 70%;
      padding: 5px;
  }
  #section-a .box-1 .im{
    width: 250px;
    height: 200px;
  }
  #section-a .small-fact{
    float: left;
    width: 30%;
    padding: 5px;
  }
  #section-a .small-fact .im {
    width: 250px;
    height: 175px;
  }


  #section-b {
    display: inline-flex;
    background-color: brown;
    color: white;
  }

  #section-b .box-2{
    padding: 5px;
  }

  #section-b .box-2 .board {
    width: 400px;
    height: 400px;

  }

  #section-b .box-3 {
    padding: 5px;
  }

  #section-b .box-3 .phase .{
    width: 100vs;
    height: auto;
  }

   #section-b .box-4{
    padding: 5px;
  }

#section-b .box-4 .slide1 {
  width: 300px;
  height: 200px;

}
#section-b .box-4 .slide2 {
  width: 60%;
  height: 35%;

}


#ex {
  text-align: center;
  font-weight: bold;
  text-decoration: underline
}


.pink {
  float: left;
  width: 300px;
  padding: 0px;
}
.pi {
  float: left;
  width: 300px;
  height: 300px
  padding: 0px;
}
.lion {
  float: left;
  width: 300px;
  height: 20%;
  padding: 0px;
}
.eldorado {
  float: left;
  padding: 0px;
  height: 50vh;
  width: 65vh;
}

.examples::after {
  content: "";
  clear: both;
  display: table;
}
0
Nika 16 फरवरी 2020, 14:21
अपने सिस्टम पथ में अपनी छवि फ़ाइल पथ की जांच कैसे करें
 – 
vadivel a
16 फरवरी 2020, 14:42
सभी छवियों को छवि फ़ोल्डर में ले जाया गया, फिर छवियों/छविनाम को कॉल करें
 – 
vadivel a
16 फरवरी 2020, 14:43
सभी छवियां जिनका मैंने उपयोग किया/उपयोग करने का प्रयास किया मैंने डाउनलोड किया और उसी फ़ोल्डर में रखा जैसा कि HTML और css फ़ाइलें संपादित करती हैं: इसे अभी आज़माएं संपादित करें 2: अभी भी कुछ भी नहीं
 – 
Nika
16 फरवरी 2020, 14:45
क्या आपने छवि विशेषताओं में स्क्रू या src को बदल दिया है
 – 
vadivel a
16 फरवरी 2020, 14:49
क्या आप लोकलहोस्ट का उपयोग कर सकते हैं
 – 
vadivel a
16 फरवरी 2020, 14:51

2 जवाब

ठीक है बस "src" विशेषता को "src" से बदलने का प्रयास करें

0
Dimitri Steinbusch 16 फरवरी 2020, 14:47

मैं आपकी सभी छवियों को एक ही फ़ोल्डर या संपत्ति फ़ोल्डर में रखने की सलाह देता हूं।

अंत में, कुछ समय के लिए, ब्राउज़र के कैशे को साफ़ करने से समस्या ठीक हो जाती है।

0
Félix Dallaire 16 फरवरी 2020, 15:58