Question

＆＃34;我的艺术＆＃34;之后的图像部分没有显示。在MY ART下滑动时，光标会发生变化。所以图像可能存在，但没有显示。问题可能在css中，但我找不到。

我是HTML，CSS和Java的新手。我从免费画廊中获取了这部分内容。 https://codepen.io/wunnle/pen/ZLomgG

如果我愚蠢的话，请不要对我大喊大叫。我想为我的课程建立一个网站。

<p> help </p>

Answer 1

因为它无法找到您要分配的图像。

res.user

placeimg是生成的图像。

我对你的codepen做了一些编辑并分叉了。

您还没有包含<img src="https://placeimg.com/640/480/tech"/>。

https://codepen.io/anon/pen/awooQB

Answer 2

在您的codepen示例中，您有以下

 <div class="gallery">
  <div class="img-w"><img src="1.jpg" alt="image" /></div>
  <div class="img-w"><img src="2.jpg" alt="image" /></div>
  <div class="img-w"><img src="3.jpg" alt="image" /></div>
  <div class="img-w"><img src="4.jpg" alt="image" /></div>
  <div class="img-w"><img src="5.jpg" alt="image" /></div>
  <div class="img-w"><img src="6.jpg" alt="image" /></div>
  <div class="img-w"><img src="7.jpg" alt="image" /></div>
  <div class="img-w"><img src="sunset.jpg" alt="image" /></div>
  <div class="img-w"><img src="10.jpg" alt="image" /></div>
</div>

对于要在网页中显示的图像，文件必须保存在与html文件相同的位置。因此，请确保图片1.jpg，2.jpg等与html文件位于同一文件夹中，并且应按照您的要求显示。

此外，使用relative paths（即通过仅提供部分路径来引用相对于html的文件），这意味着您的图像将永远不会显示在codepen上，因为它无法访问图像。

要使图像显示在codepen上，您需要以某种方式将其发布到Internet（超出此问题的范围）并使用发布图像的完整URL（它应以http：//或https：//开头））

虽然你也有

看CSS

.img-w img {
  display: none;
}

删除display:none意味着显示图像，但是，我认为您希望让JQuery工作，因此您应该将对JQuery的引用添加到HTML文件中，然后根据示例显示图像下面：

https://codepen.io/anon/pen/awoorp

此问题的答案linking jquery in html向您展示了如何将JQuery添加到HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

请注意这些是旧文件，应替换为JQuery的当前版本。

Answer 3

您可以使用此代码：

$(function() {
  $(".img-w").each(function() {
    $(this).wrap("<div class='img-c'></div>")
    let imgSrc = $(this).find("img").attr("src");
     $(this).css('background-image', 'url(' + imgSrc + ')');
  })
            
  
  $(".img-c").click(function() {
    let w = $(this).outerWidth()
    let h = $(this).outerHeight()
    let x = $(this).offset().left
    let y = $(this).offset().top
    
    
    $(".active").not($(this)).remove()
    let copy = $(this).clone();
    copy.insertAfter($(this)).height(h).width(w).delay(500).addClass("active")
    $(".active").css('top', y - 8);
    $(".active").css('left', x - 8);
    
      setTimeout(function() {
    copy.addClass("positioned")
  }, 0)
    
  }) 
  
  

  
})

$(document).on("click", ".img-c.active", function() {
  let copy = $(this)
  copy.removeClass("positioned active").addClass("postactive")
  setTimeout(function() {
    copy.remove();
  }, 500)
})

html,
body {
	margin: 0;
	padding: 0;
}
.all {
	width: 100%;
}
.center {
  transform: translate(-50%);
  position: absolute;
  top: 100px;
  left: 50%;
}

.paint {
	padding-top: 55%;
	font-family: 'Quicksand';
	font-size: 30px;
}

.menu {
	background-color: transparent;
	width: 100%;
}

.menu a {
	float: right;
	display: block;
	color: black;
	font-family: 'Quicksand', sans-serif;
	text-align: center;
	text-decoration: none;
	font-size: 17px;
	padding-right: 50px;
	padding-left: 50px;
	padding-bottom: 10px;
	padding-top: 10px;
}

.menu a:hover {
	background-color: #ddd;
	color: black;
}

.menu .icon {
	display: none;
}
@-ms-viewport{
  width: device-width;
}
@media screen and (max-width: 600px) {
	.menu a:not(:last-child) {
		display: none;
	}
	.menu a.icon {
		float: right;
		display: block;
	
	}
}

@media screen and (max-width: 600px) {
	.menu.responsive {
		position: relative;
	}
	.menu.responsive a.icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	.menu.responsive a {
		float: none;
		display: block;
		text-align: middle;
	}
}
body {
  padding: 30px 0;
  position: relative;
}

.gallery {
  width: 600px;
  margin: auto;
  border-radius: 3px;
  overflow: hidden;
  //position: relative;
}
.img-c {
  width: 200px;
  height: 200px;
  float: left;
  position: relative;
  overflow: hidden;
}

.img-w {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: transform ease-in-out 300ms;
}

.img-w img {
  display: none;
}

.img-c {
    transition: width ease 400ms, height ease 350ms, left cubic-bezier(0.4, 0, 0.2, 1) 420ms, top cubic-bezier(0.4, 0, 0.2, 1) 420ms;
}

.img-c:hover .img-w {
  transform: scale(1.08);
  transition: transform cubic-bezier(0.4, 0, 0.2, 1) 450ms;
}

.img-c.active {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  z-index: 2;
  //transform: translateX(-50%);
}

.img-c.postactive {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.img-c.active.positioned {
  left: 0 !important;
  top: 0 !important;
  transition-delay: 50ms;
}

<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,500" rel="stylesheet">
<title>Kinga Błaszczyk</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="all">
  <div class="menu" id="myMenu">
   <a href="#contact">Contact</a>
   <a href="#about">About</a>
   <a href="#myart">My Art</a>
   <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
  </div>
   
  <div class="center">
   <img src="https://s-media-cache-ak0.pinimg.com/736x/15/3c/38/153c381fbb537893047153bad1819568.jpg">
  </div>
  <br>
  <div class="paint" style="text-align: center;">
   <p>MY ART </p>
  </div>
<div class="gallery">
  <div class="img-w">
    <img src="https://images.unsplash.com/photo-1485766410122-1b403edb53db?dpr=1&auto=format&fit=crop&w=1500&h=846&q=80&cs=tinysrgb&crop=" alt="" /></div>
  <div class="img-w"><img src="https://images.unsplash.com/photo-1485793997698-baba81bf21ab?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" alt="" /></div>
  <div class="img-w"><img src="https://images.unsplash.com/photo-1485871800663-71856dc09ec4?dpr=1&auto=format&fit=crop&w=1500&h=2250&q=80&cs=tinysrgb&crop=" alt="" /></div>
  <div class="img-w"><img src="https://images.unsplash.com/photo-1485871882310-4ecdab8a6f94?dpr=1&auto=format&fit=crop&w=1500&h=2250&q=80&cs=tinysrgb&crop=" alt="" /></div>
  <div class="img-w"><img src="https://images.unsplash.com/photo-1485872304698-0537e003288d?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" alt="" /></div>
  <div class="img-w"><img src="https://images.unsplash.com/photo-1485872325464-50f17b82075a?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" alt="" /></div>
  <div class="img-w"><img src="https://images.unsplash.com/photo-1470171119584-533105644520?dpr=1&auto=format&fit=crop&w=1500&h=886&q=80&cs=tinysrgb&crop=" alt="" /></div>
  <div class="img-w"><img src="https://images.unsplash.com/photo-1485881787686-9314a2bc8f9b?dpr=1&auto=format&fit=crop&w=1500&h=969&q=80&cs=tinysrgb&crop=" alt="" /></div>
  <div class="img-w"><img src="https://images.unsplash.com/photo-1485889397316-8393dd065127?dpr=1&auto=format&fit=crop&w=1500&h=843&q=80&cs=tinysrgb&crop=" alt="" /></div>
</div>  </div>


</body>
</html>

为什么图片没有在网站上显示？

3 个答案: