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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/21728850/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 00:55:08  来源:igfitidea点击:

How to give src to the <img> tag in html from the system drive?

htmlimage

提问by Stephen L

I want to display an image on a web page using HTML <img>tag.

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

I have stored the image on my local drive.

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

How to achieve this?

如何实现这一目标?

The code:

编码:

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

Image is not displayed.

不显示图像。

回答by nktsamba

You must use the correct local path from your PC and the correct Drive letter. Then change the backslashs () to forward slashes (/) and add file:/// before the path, so:

您必须使用来自 PC 的正确本地路径和正确的驱动器盘符。然后将反斜杠 () 更改为正斜杠 (/) 并在路径前添加 file:/// ,因此:

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

becomes:

变成:

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

**Also, please note that in Chrome and possibly other browsers, you may not be able to use a local file/image on a site that is not locally hosted. Please reference this post: Cannot open local file - Chrome: Not allowed to load local resource

**另外,请注意,在 Chrome 和可能的其他浏览器中,您可能无法在非本地托管的站点上使用本地文件/图像。请参考这篇文章:无法打开本地文件 - Chrome:不允许加载本地资源

回答by korhner

What you are trying to accomplish is a security feature present in all modern browsers.

您试图完成的是所有现代浏览器中都存在的安全功能。

You could do that only if you run the html file stored locally - it will not work once you deploy it to a web server.

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

If you really MUST do that, you could build a browser extension - Firefox extensions and IE extensions can access local resources. Chrome is much more restrictive however.

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

回答by Ashouri

when you webpage loaded in visitors with their browsers in internet

当您使用互联网浏览器加载访问者的网页时

your image path in img tag just point to thier filesystem localtion not your file systemlocation

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

you must upload your img in your webserver like apache or iis or host location and set path of img tag with this public image path

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

for more detail you can search about client server concept in internet and web

有关更多详细信息,您可以在 Internet 和 Web 中搜索有关客户端服务器概念的信息

but if you mean in your browser did not show its relate to security issues

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

be successfull

成功

回答by Vinay Pratap Singh

I want to display my image in the web page using html

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

If you are showing the image from your web page, the image file has to be on your web server only.
You can not show it from your local system, as the file is Displayed from web server only.

如果您要显示来自网页的图像,则图像文件必须仅位于您的 Web 服务器上。
您无法从本地系统显示它,因为该文件仅从 Web 服务器显示。

回答by Kevin Joymungol

Your image should be on a relative path not absolute one.

您的图像应该在相对路径上而不是绝对路径上。

Say your html file is in D:\myhtml\home.html. Copy the Images folder in myhtml. Then change your code to <img src="Images\TechnipLogo.jpg" />.

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

Hope this helps

希望这可以帮助

回答by Kevin Joymungol

You can't achieve that, Or you shouldn't achieve that. Linking to files on your computer will not work when you upload the website. You should move the images into the same folder as your index.html or make a folder in the same folder as your index.html then you can refrence the file like this:

你不能实现那个,或者你不应该实现那个。上传网站时,无法链接到计算机上的文件。您应该将图像移动到与 index.html 相同的文件夹中,或者在与 index.html 相同的文件夹中创建一个文件夹,然后您可以像这样引用文件:

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

回答by DrOne

Well, as there are many issues with different browsers and so with Apache paths config, I tried all the possible ways file: file:// c: c| and none of them worked on my Firefox 57.0 in W7, so there is a fast solution (if you use php). Just call a file "embedIMG.php" with this content:

好吧,由于不同的浏览器和 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();

 ?>  

Call this "embedIMG.php" from your img tag:

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

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

THEPATHTOYOURIMAGE will be the path to your image "D:\Images\TechnipLogo.jpg", it's better to do it this way "D:/Images/TechnipLogo.jpg" with common slashes on Windows. If you have spaces or special characters in your path you will have to declare it with urlencode() function:

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

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