具有共享网络的 Html 图像 src 路径在 Firefox 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8732409/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Html Image src path with shared network is not working in firefox
提问by Palanisami
In My webpage i am using a image tag, the src attribute is pointing to shared network location ie (/server/images/image1.png). The exact script is "<img src="file://///server/images/image1.png". It is working fine in IE. In firefox, when I do debug using firebug its showing image, but it's not displayed in page (user view). Even it's working fine when copy this location and place it in firefox address bar. What will be the problem while using img tag also what is the solution for this? Thanks in advance.
在我的网页中，我使用了图像标记，src 属性指向共享网络位置，即 (/server/images/image1.png)。确切的脚本是"<img src="file://///server/images/image1.png". 它在 IE 中运行良好。在 firefox 中，当我使用 firebug 进行调试时，其显示图像，但未显示在页面中（用户视图）。即使复制此位置并将其放置在 Firefox 地址栏中也可以正常工作。使用 img 标签时会出现什么问题，对此有什么解决方案？提前致谢。
采纳答案by Palanisami
I wrote a servlet which reads the file from LAN using Java File Stream and sets it in response and it does the trick. Thanks to all for valuable response.
我编写了一个 servlet，它使用 Java 文件流从 LAN 读取文件并将其设置为响应，它就可以解决问题。感谢大家的宝贵回应。
回答by Paul Zahra
Putting this as an answer here so as to provide help for others like myself that was searching for how to display networked images and came accross this SO post in the top 3 search engine results. It also seems like a better answer than the java servlet issuing images in the response.
将其作为答案放在这里，以便为像我这样正在搜索如何显示网络图像的其他人提供帮助，并在前 3 个搜索引擎结果中遇到此 SO 帖子。它似乎也比在响应中发出图像的 java servlet 更好的答案。
FireFox would not display networked images so I created an MVC helper that extends HtmlHelper.
FireFox 不会显示联网图像，因此我创建了一个扩展 HtmlHelper 的 MVC 帮助程序。
public static class ImageHelper
{
/// <summary>Converts a photo to a base64 string.</summary>
/// <param name="html">The extended HtmlHelper.</param>
/// <param name="fileNameandPath">File path and name.</param>
/// <returns>Returns a base64 string.</returns>
public static MvcHtmlString PhotoBase64ImgSrc(this HtmlHelper html, string fileNameandPath)
{
var byteArray = File.ReadAllBytes(fileNameandPath);
var base64 = Convert.ToBase64String(byteArray);
return MvcHtmlString.Create(String.Format("data:image/gif;base64,{0}", base64));
}
}
use in the MVC View like so:
在 MVC 视图中使用，如下所示：
using
<img src="@Html.PhotoBase64ImgSrc(image)" height="60px" width="60px" alt="photo" />
here the 'image' in @Html.PhotoBase64ImgSrc(image) is a pure network UNC, e.g.
这里@Html.PhotoBase64ImgSrc(image) 中的'image' 是一个纯网络UNC，例如
//Photos/ebaebbed-92df-4867-afe8-0474ef8644eb.jpg
回答by Prasad Dhananjaya
Create a regular HTML img element like so:
创建一个常规的 HTML img 元素，如下所示：
<img id="image1" runat="server" ImageUrl=<%# Eval("Value") %>/>
image1.ImageUrl = "data:image/png;base64," + Convert.ToBase64String(bytes);
Where bytes is a byte[].
其中字节是一个byte[].
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["FileName"] != null)
{
// Read the file and convert it to Byte Array
string filePath = "C:\Users\Public\Pictures\Sample Pictures\";
string filename = Request.QueryString["FileName"];
string contenttype = "image/" + Path.GetExtension(filename).Replace(".", "");
FileStream fs = new FileStream(filePath + filename, FileMode.Open, FileAccess.Read);
BinaryReader br = new BinaryReader(fs);
Byte[] bytes = br.ReadBytes((Int32)fs.Length);
br.Close();
fs.Close();
image1.ImageUrl = "data:image/png;base64," + Convert.ToBase64String(bytes);
}
}
You are done. The image will be displayed.
你完成了。将显示图像。
回答by Diodeus - James MacFarlane
The solution usually is: use a web server.
解决方案通常是：使用Web 服务器。
回答by Aaron Brewer
You may have to make it like so.
你可能不得不这样做。
<img src="../server/images/image1.png" />
Once you add the "../" it is basically telling your browser to go back one directory to search for the location after the "../" .
添加 "../" 后，它基本上是在告诉浏览器返回一个目录以搜索 "../" 之后的位置。
Where is the file located and where is the location of your HTML document?
文件位于何处以及 HTML 文档的位置在哪里？
UPDATE:
更新：
I do all of my work on a Network Server as well... This should do the trick.
我也在网络服务器上完成所有工作......这应该可以解决问题。
<img alt="" src="file:///SERVER:/FOLDER/IMAGES/image1.png" />
Thanks, Aaron
谢谢，亚伦
