JQuery无法使用append加载本地图片？

Question

我在尝试使用JQuery添加本地图片时遇到了一个问题。

HTML文件；

<!-- a simple grid and an animate button -->
<div class="grid"></div>
<span class="animate">Animate</span>

<!-- jQuery -->
<script src="http://thecodeplayer.com/u/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<!-- jQuery easing plugin -->
<script src="http://thecodeplayer.com/u/js/jquery.easing.min.js" type="text/javascript></script>
<link rel="stylesheet" href="styles.css">
<script src="jquery.js"></script>

JQuery代码：

//Creating 50 thumbnails inside .grid
//the images are stored on local. So we can use a loop to generate the HTML.
var images = "", count = 10;
for(var i = 1; i <= count; i++)
images += '<img src="/images/'+i+'.jpg" />';

//appending the images to .grid
$(".grid").append(images);

嗯……我可以看到在Dreamweaver中加载了图片，但它在浏览器中只显示了10个损坏的图片图标，似乎图片加载不正确。有人能帮我吗？非常感谢!

Answer 1

我看到您已经导入了2个外部jQuery文件。仅使用1。

<script src="http://thecodeplayer.com/u/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="jquery.js"></script>

此外，我认为你有一个额外的正斜杠前面的图像文件夹。

images += '<img src="images/'+i+'.jpg" />';

Answer 2

首先，请遵循以下步骤：

1)jquery-1.9.1.min.js ==>这里.min只是jquery的简化版本。

所以，不要只使用一个jquery版本的both.use，普通的或者缩小的。

您的脚本将如下所示：

<script src="http://thecodeplayer.com/u/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<!-- jQuery easing plugin -->
<script src="http://thecodeplayer.com/u/js/jquery.easing.min.js" type="text/javascript></script>
<link rel="stylesheet" href="styles.css">

2)确保您的镜像路径正确。

3)你们有名字是数字numbers.like 1.jpg的imgaes吗？

4)让您的所有图像都有.jpg extension.check，它可以是.png或任何其他。

Answer 3

这可能是错误：

images += '<img src="/images/'+i+'.jpg" />';

使用"/images/image.jpg“告诉html查找服务器的根目录(begin forlder)。如果你有一个像"C:/Images“这样的文件夹，考虑到你没有告诉the服务器根目录在其他地方，这将是正确的。否则，请尝试：

images += '<img src="images/'+i+'.jpg" />';

或

images += '<img src="C:/whatever/folder/you/use/images/'+i+'.jpg" />';

希望这就是你要找的。