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文件夹之前还有一个额外的正斜杠。

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

Answer 2

首先请按照以下步骤操作：

1）jquery-1.9.1.min.js ==＆gt;此处.min只是jquery的缩小版。

所以，不要同时使用两者。只使用一个正常或缩小的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">

2）确保您的图片路径正确无误。

3）你有名字是数字的imgaes。像1.jpg

4）让你的所有图片都有.jpg扩展名。检查它可能是.png或任何其他。

Answer 3

这可能是错误：

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

使用“/images/image.jpg”告诉html查找服务器的根（begin forlder）。如果您有一个像“C：/ Images”这样的文件夹，这是正确的，考虑到您没有告诉网络服务器根是在其他地方。否则，请尝试：

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

或

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

希望这就是你要找的东西。

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

3 个答案: