使用 holder.js 显示图像缩略图

Question

我正在尝试使用holder.js显示一张图片，但是显示的却是示例图片。

<img src='http://upload.wikimedia.org/wikipedia/sr/0/0c/Firefox-logo.png' data-   src="holder.js/140x140" alt='Thumbnail' class="img-thumbnail img-responsive"/>

这是使用holder.js的正确方法吗？有人能发布一个使用holder.js显示图像的示例吗？

- Manoj Sreekumar

---

我无法在我的Web服务器上使其工作，尝试了各种不同的方法，但都没有成功。可能是一个损坏的插件。 - Travis

@Travis 你有没有尝试过其他可行的替代方案来代替 holder.js？ - Manoj Sreekumar

Answer 1

不确定为什么你把data-src这样分开，它应该只是：

data-src

我没有看到其他问题，只有这个。

所以，为了看一个例子，请查看这个：

http://jsfiddle.net/R22tj/

编辑

如果您只想显示图像，请删除data-src，图像将显示出来。如果您希望指定高度和宽度，也可以在HTML中进行设置。因此，请查看此fiddle。（在HTML部分向下滚动以查看140x140图像。）

http://jsfiddle.net/jLqd9/1/

- Bryce Easley

---

那是一个打字错误。这个小提琴仍然无法工作。它会显示图像几秒钟，然后显示示例140x140图像。 - Manoj Sreekumar

@ManojSreekumar 好的，我不明白你想要什么？你是想要占位符显示还是想要图片显示。如果你想要占位符显示，那么我给你的代码示例是有效的，可能是你的浏览器兼容性出了问题。 - Bryce Easley

@ManojSreekumar 好的，看一下我的更新答案。你只需要去掉 data-src 这部分就好了。 - Bryce Easley

谢谢。Bootstrap的例子让我对holder.js的使用感到困惑。 - Manoj Sreekumar

为什么<img class="img-thumbnail img-responsive" src="http://upload.wikimedia.org/wikipedia/sr/0/0c/Firefox-logo.png" alt="" />可以工作，但是像<img class="img-thumbnail img-responsive" src="http://localhost/live/images/logo.png" alt="" />这样的本地图片却不行呢？图片在其他地方都能看到！ - BentCoder