JQuery无法使用追加加载本地图片

JQuery cannot load local picture by using append?

本文关键字：加载 地图 追加 JQuery      更新时间：2023-09-26

我在尝试使用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个损坏的图片图标，似乎图片加载不正确。有人能帮我吗？非常感谢！

我看到您已经导入了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" />';

首先遵循以下步骤：

1） jquery-1.9.1.min.js==>此处.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或任何其他格式。

这可能是错误：

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

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

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

或

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

希望这就是你想要的。

相关文章：