Html 如何从桌面读取图像并输入到 div 标签中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12502181/
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
How to read an image from desktop and input into a div tag?
提问by Yusuf
I can't seem to get my image from my desktop and put it in one of my div tag. Can someone please help me.
我似乎无法从我的桌面获取我的图像并将其放入我的 div 标签之一。有人可以帮帮我吗。
<!DOCTYPE html>
<html>
<body>
<img src="C:\Users\aldiaz\Desktop\DynamicsTest1.jpg">
<div id="container" style="width:500px">
<div id="header" style="background-color:#0000F8;">
<h1 style="margin-bottom:0;"> Triton Subs</h1>
</div>
<div id="image" style="background-color:yellow; height:200px;width:100px;float:left;">
<img src="C:\Users\aldiaz\Desktop\DynamicsTest1.jpg height:200px; width:100px;floatleft;">
</div>
<div id="content" style="background- color:#D7D7D7;height:200px;width:400px;float:left;">Dear [FIRSTNAME] [LASTNAME],<br/> <br/>You have earned 5 videos and are ready to redeem.<br/><br/>Log into the Triton Submarines Experience now to choose your reward!
</div>
<div id="footer" style="background-color:#0000F8;clear:both;text-align:center;"> Trinto Sub Co
</div>
</div>
</body>
</html>
回答by Oedum
You need to write:
你需要写：
<img src="C:\Users\aldiaz\Desktop\DynamicsTest1.jpg" style="height:200px;width:100px;float:left">
回答by Diodeus - James MacFarlane
If the HTML file is on your desktop, then use a RELATIVE file path, such as:
如果 HTML 文件在您的桌面上，则使用相对文件路径，例如：
<img src="images/DynamicsTest1.jpg">
回答by cimmanon
Browsers aren't supposed to let you access files on your computer like that (well, IE does, but it shouldn't). It's considered a security vulnerability. Even if it was allowed, no one else visiting that page would be able to see the image because they probably don't have a user named aldiaz on their computer, and even if they did, that image probably won't exist on hisdesktop.
浏览器不应该让您像那样访问计算机上的文件（嗯，IE 可以，但不应该）。它被认为是一个安全漏洞。即使允许，访问该页面的其他人也无法看到该图像，因为他们的计算机上可能没有名为 aldiaz 的用户，即使有，该图像也可能不会存在于他的桌面上.
If you are linking to the images locally while you are testing before uploading to your webserver, use relative URLs instead like the others have suggested.
如果您在上传到网络服务器之前进行测试时在本地链接到图像，请使用相对 URL，而不是像其他人建议的那样。
Now if you are looking at previewing an image before a user uploads it, there are many fine tutorials out there on how to use the relatively new FileReader API:
现在，如果您想在用户上传图像之前预览图像，有许多关于如何使用相对较新的 FileReader API 的精美教程：
