本地图片不上传到服务器，是无法访的
1、html文件和图片都在本地电脑上，可以直接双击html文件用浏览器打开。只要图片路径正确，这种情况可以正常显示图片。如下图：
2、html文件在服务器上，图片也必须在web可以访问到的服务器上。目前所有互联网网站都是这种情况。
解决方法：把本地图片上传到服务器，就可以用Html正常使用本地的图片。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>Transform</title>
<style type="text/css">
.test-box{
width:600px
margin:50px auto}
.pic{
-webkit-transition:all 1s ease-in-out
transition:all 1s ease-in-out
cursor:pointer}
.top-pic{
position:absolute
transform:scale(0,0)}
.test-box:hover .top-pic{
-webkit-transform-origin:top right
-webkit-transform:scale(1,1)}
.test-box:hover .bot-pic{
-webkit-transform:scale(0,0)
-webkit-transform-origin:bottom left
opacity: .5
-webkit-transform:rotate(120deg)
-webkit-transform-origin:bottom left
}
</style>
</head>
<body>
<div class="test-box">
<img class="pic top-pic" src="test-pic01.jpg" />
<img class="pic bot-pic" src="test-pic02.jpg" />
</div>
</body>
</html>
随便写了几个效果，没有用到JS，不过要用到JS只要把触发事件替换掉上面的hover就行了，比如：
$(".button").click(function () {
。。。
})
这里面用到CSS3，所以请不要用IE11以下的低版本浏览器，不然你啥都看不见
首先看一下路径问题，然后就是你的代码大小写 和 是否有写错，看到下面的你的截图上<img src... 好像是连着的，还有图片是否是PNG？教你另一个方法验证是否是路径错了，你在浏览器预览的时候 按F12 审查元素 ，然后在下面看你的代码里面的那个路径 点击，看是否是那张图片，如果不是那就是你路径错了。
