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

【问题标题】：Why are images not showing on website?为什么图片不显示在网站上？
【发布时间】：2017-06-01 08:02:17
【问题描述】：

“我的艺术”部分之后的图像未显示。当您在 MY ART 下滑动时，光标会发生变化。所以图像可能在那里，但没有显示。问题可能出在 css 中，但我找不到。

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

我是 HTML、CSS 和 Java 方面的新手。我从免费画廊中获得了这一部分。 https://codepen.io/wunnle/pen/ZLomgG

如果我犯了什么蠢事，请不要对我大喊大叫。我试图为我的课程制作一个网站。 

<p> help </p>

【问题讨论】：

  • 图片源不存在。
  • 附言。你没有使用 Java。
  • 阅读minimal reproducible example 并改进您的问题。请。戏剧性地。
  • 你必须提供相对图像路径

标签： html css


【解决方案1】：

您可以使用此代码：

$(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>

【讨论】：

  • 非常感谢您的帮助：>
  • @Kinga 你对我的回答满意吗？
  • 是的，因为我终于可以看到图像了，不是我的，但就是这样；D
  • @Kinga 因为如果是这样的话，记得点击我的答案旁边的复选标记“接受”，这样大家就知道问题解决了。
  • 知道了：>感谢您的帮助
【解决方案2】：

因为它找不到您分配的图像。 

   <img src="https://placeimg.com/640/480/tech"/>

placeimg 是生成的图像。

我对您的 codepen 进行了一些编辑并将其分叉。

你也没有包含jquery。

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

【讨论】：

  • jquery?你让图像看起来我明白了（因为放置）但是为什么我的图像不想显示，即使我将它们与 html 放在相同的位置文件中？
  • 我认为您的图片与您的 html 文件不在同一目录中。
【解决方案3】：

在您的 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 上，您需要以某种方式将它们发布到互联网（超出此问题的范围）并使用已发布图像的完整 URL（应以 http:// 或 https:// 开头)

虽然你也有看 CSS

.img-w img {
  display: none;
}

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

片段： 

$(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 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.paint {
    padding-top: 55%;
    font-family: 'Quicksand';
    font-size: 30px;
}

.gallery {
  width: 100%;
  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;
}

.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;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
</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="painter.png">
  </div>
  
  <div class="paint">
  <center>
   <p>MY ART </p>
   </center>
  </div>
 <div class="gallery">
  <div class="img-w"><img src="http://website-design-studio.net/finallinkB/wp-content/themes/suffusion/images/1.jpg" alt="image" /></div>
  <div class="img-w"><img src="http://website-design-studio.net/finallinkB/wp-content/themes/suffusion/images/1.jpg" alt="image" /></div>
  <div class="img-w"><img src="http://website-design-studio.net/finallinkB/wp-content/themes/suffusion/images/1.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>
  </div>


</body>
</html>

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。

【讨论】：

  • 它们保存在与 html 文件相同的位置。
  • 已检查。我确定
  • 我知道它们不会在 codepen 上显示，但你可以看到前面有小方块告诉你，图像应该在那里，但我们找不到。我明白了。
  • 你应该在你的 HTML 文件中添加对 JQuery 的引用，然后图像将按照下面的示例显示 - 如何添加这些引用？
  • 添加说明以添加 JQuery 参考
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-10-22
  • 1970-01-01
  • 2011-03-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode