我正在制作一个网站，该网站包含5个页面（例如page1.html，page2.html等，以及.css表）。奇怪的是，在某些页面上图像的一部分出现没有问题，而其他页面则没有问题。页面/文件似乎有问题，因为当我尝试在不同的html文件中使用同一图像代替出现的图像，并且显示时没有问题。我尝试同时复制整个URL和带有扩展名的图像名称（图像与html和css文件位于同一目录中）。有什么想法吗？ （我正在使用Chrome浏览器查看网站）
<!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 :(得分：0)
好吧，只需尝试将“ scr”属性替换为“ src”
答案 1 :(得分：0)
我建议将所有图像放在同一文件夹或资产文件夹中。
最后，一段时间后，清除浏览器的缓存即可解决该问题。