当<img>
属性是二进制数组(ASP.NET MVC 3)时,我需要一些帮助或信息在src
标记中显示图像:
https://stackoverflow.com/a/2644598/106616
这是我使用的解决方案。 (目的是,我不想向用户显示物理图像路径)
好的,然后我想使用FancyBox插件来显示该图片:
<link href="@Url.Content("~/Content/jquery.fancybox-1.3.4.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery.fancybox-1.3.4.js")" type="text/javascript"></script>
<a id="book-cover-hl" href="@path">
<img alt='' class='book-cover-details' src="@path" />
</a>
$(function () {
$("a#book-cover-hl").fancybox({
'overlayShow': false,
'transitionIn': 'elastic',
'transitionOut': 'elastic'
});
});
但是,我注意到如果我将
@path
变量放在<a [...] href="@path">
插件无法正常工作 - 如果我点击 图像,只显示加载动画,但不显示我的图像。有没有人 知道如何解决它?或许还有另一个想法?让我听听 来自你的。
答案 0 :(得分:2)
根据that回答,它有效:
如果你想使用fancybox和数据uri图像,如。
<img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD// gA8Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NzApLCBxdWFsaXR5ID0gMTAwCv/ bAEMAAQEBAQEBAQEBAQEB......
你需要在jquery fancybox脚本中改变一些东西。
1)基于版本:1.3.4(11/11/2010)2)更改第23行。
ajaxLoader = null,imgPreloader = new Image(),imgRegExpdatauri = / (data:image)/ i,imgRegExp = /.(jpg | gif | png | bmp | jpeg)(。)?$ / i, swfRegExp = / [^。]。(swf)\ s $ / i,
3)为这些更改第113-117行
if(href.match(imgRegExpdatauri)){type ='image2';
}否则if(href.match(imgRegExp)){type ='image';
4)休息后插入这条线;在第197行
案例'image2':busy = false;
$ fancybox.showActivity();
imgPreloader = new Image();
imgPreloader.onerror = function(){ _错误(); };
imgPreloader.onload = function(){busy = true;
imgPreloader.onerror = imgPreloader.onload = null;
_process_image(); };
imgPreloader.src = href;打破;
现在应该可以了。