如何从系统驱动器将 src 赋予 html 中的 <img> 标签？

Question

我想使用 HTML <img> 标签在网页上显示图像。

我已将图像存储在本地驱动器上。

如何做到这一点？

代码：

<img src="D:\Images\TechnipLogo.jpg">

图片不显示。

Answer 1

你可以看看我的回答。我已经使用 C# 语言解决了这个问题 Why can't I do <img src="C:/localfile.jpg">?

<asp:Image ID="imgEvid" src="#" runat="server" Height="99px"/>
                        if (File.Exists(filepath))
                        {
                            byte[] imageArray = System.IO.File.ReadAllBytes(filepath);
                            string base64ImageRepresentation = Convert.ToBase64String(imageArray);
                            var val = $"data: image/png; base64,{base64ImageRepresentation}";
                            imgEvid.Attributes.Add("src", val);
                        }

希望这会有所帮助

Answer 2

您必须使用 PC 的正确本地路径和正确的驱动器号。然后把反斜杠（）改成正斜杠（/），在路径前加上file:///，这样：

<img src="D:\Images\TechnipLogo.jpg">

变成：

<img src="file:///D:/Images/TechnipLogo.jpg">

**另外，请注意，在 Chrome 和可能的其他浏览器中，您可能无法在非本地托管的网站上使用本地文件/图像。请参考此帖：Cannot open local file - Chrome: Not allowed to load local resource

Answer 3

你的图片应该是相对路径而不是绝对路径。

假设您的 html 文件位于 D:\myhtml\home.html 中。复制 myhtml 中的 Images 文件夹。然后将您的代码更改为<img src="Images\TechnipLogo.jpg" />。

希望对你有帮助

Answer 4

好吧，由于不同的浏览器和 Apache 路径配置存在许多问题，我尝试了所有可能的方式 file: file:// c: c|而且他们都没有在 W7 的 Firefox 57.0 上工作，所以有一个快速的解决方案（如果你使用 php）。只需使用以下内容调用文件“embedIMG.php”：

  <?php

     $file = $_GET["imgg"];
     $type = 'image/jpeg'; // or whatsoever
     header('Content-Type:'.$type);
     header('Content-Length: ' . filesize($file));
     $img = file_get_contents($file);
     echo $img;

     exit();

 ?>  

从你的 img 标签中调用这个“embedIMG.php”：

   <img src="embedIMG.php?imgg=THEPATHTOYOURIMAGE">

THEPATHTOYOURIMAGE 将是您的图像“D:\Images\TechnipLogo.jpg”的路径，最好以“D:/Images/TechnipLogo.jpg”的方式在 Windows 上使用常见的斜杠。如果路径中有空格或特殊字符，则必须使用 urlencode() 函数声明它：

  <?php  $THEPATHTOYOURIMAGE=urlencode($THEPATHTOYOURIMAGE); ?>

Answer 5

我想用html在网页中显示我的图片

如果您要显示网页中的图像，则图像文件必须仅在您的网络服务器上。
您无法从本地系统显示它，因为该文件仅从 Web 服务器显示。

Answer 6

你无法做到这一点，或者你不应该做到这一点。当您上传网站时，链接到您计算机上的文件将不起作用。您应该将图像移动到与 index.html 相同的文件夹中，或者在与 index.html 相同的文件夹中创建一个文件夹，然后您可以像这样引用文件：

<img src="Images\TechnipLogo.jpg" />

Answer 7

当您的网页在访问者中加载时使用他们在互联网上的浏览器

您在 img 标签中的图像路径只是指向他们的文件系统位置而不是您的文件 系统定位

您必须将您的 img 上传到您的网络服务器（如 apache 或 iis 或主机位置）并使用此公共图像路径设置 img 标签的路径

更多细节，您可以搜索互联网和网络中的客户端服务器概念

但如果您的意思是在您的浏览器中没有显示其与安全问题有关

成功

Answer 8

您要实现的是所有现代浏览器中都存在的安全功能。

只有在运行本地存储的 html 文件时才能执行此操作 - 一旦将其部署到 Web 服务器，它将无法工作。

如果您真的必须这样做，您可以构建一个浏览器扩展 - Firefox 扩展和 IE 扩展可以访问本地资源。然而，Chrome 的限制要严格得多。