0
我正在做一个网页，并调整了一些代码后，我的形象在网站上不再显示，但我有控制台的错误这里是代码请别人帮助我尝试了几件事情，以不运气所以这个我不得已图像没有在网页上显示
<!DOCTYPE HTML>
<html>
<head>
<link rel="StyleSheet" type="text/css" href="StyleSheet.css">
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
<script src="kinetic-v5.1.0.min.js" type="text/javascript"></script>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="jquery.mousewheel.min.js" type="text/javascript"></script>
<link href="easy-sidebar.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-inverse easy-sidebar" style="z-index: 99999; position: absolute;">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle easy-sidebar-toggle" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Brand</a>
</div>
<ul class="nav navbar-nav">
<aside>
<ul class="nav nav-tabs">
<li><a href="#one" aria-controls="one" role="tab" data-toggle="tab">One</a>
</li>
<li><a href="#two" aria-controls="two" role="tab" data-toggle="tab">Two</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="one"></div>
<div role="tabpanel" class="tab-pane" id="two"></div>
</div>
</aside>
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>
</li>
<li><a href="#">Link</a>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown
<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
<li class="divider"></li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown
<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="bodyMain" style="z-index: 1 !important; display: inline-block; position: absolute; left: 0px;">
<div class="container" style="">
<button class="btn btn-danger easy-sidebar-toggle">Toggle Sidebar</button>
<script type="text/javascript">
</script>
</div>
<div id="canvasContainer" style="width: 800px; height: 940px; border: 1px solid; padding-left: 0; padding-right: 0;
margin-left: auto; margin-right: auto; display: block; "></div>
<script type="text/javascript">
$(document).ready(function() {
$(document).mousewheel(function(event, delta) {
setYPos(delta);
});
});
var yposition = 50;
var xposition = 20;
var width = 200;
var height = 137;
function setYPos(v) {
yposition += v;
width += v;
height += v;
console.debug('Y: ', yposition);
drawImage(imageObj);
}
function drawImage(imageObj) {
var stage = new Kinetic.Stage({
container: "canvasContainer",
width: $('#canvasContainer').width(),
height: $('#canvasContainer').height()
});
var layer = new Kinetic.Layer();
// image
var image1 = new Kinetic.Image({
image: imageObj,
x: xposition,
y: yposition,
width: width,
height: height,
draggable: true,
dragBoundFunc: function(pos) {
if (pos.x < this.minX) this.minX = pos.x;
return {
x: pos.x,
y: this.getAbsolutePosition().y
}
}
});
stage.getContent().addEventListener('mousemove', function() {
xposition = stage.getPointerPosition().x;
});
// add cursor styling
image1.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
image1.on('mouseout', function() {
document.body.style.cursor = 'default';
});
image1.dragBoundFunc(function() {
return {
x: xposition,
y: yposition
};
});
layer.add(image1);
stage.add(layer);
var imageObj = new Image();
imageObj.onload = function() {
drawImage(this);
};
imageObj.src = 'image1.png';
};
</script>
</div>
<script src="js/bootstrap.min.js"></script>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>