HTML 图像不显示，而 src url 有效
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18413929/
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 not displaying, while the src url works
提问by mtfurlan
<img class="sealImage" alt="Image of Seal" src="file:///C:/Users/Anna/Pictures/Nikon%20Transfer/SEALS%20PROJECT/j3evn.jpg">
That doesn't display an image, just the alt. But if I go to
那不显示图像，只显示 alt。但如果我去
file:///C:/Users/Anna/Pictures/Nikon%20Transfer/SEALS%20PROJECT/j3evn.jpg
in a browser, the image displays.
在浏览器中，图像显示。
I'm hosting this on xampp, on a windows machine right now.
我现在在 Windows 机器上的 xampp 上托管它。
I've tried different browsers, and with and without %20 for space, but I know that with is the correct way.(It worked with both, actually)
我试过不同的浏览器，有和没有 %20 的空间，但我知道有是正确的方法。（实际上它对两者都有效）
And I know the images will only be visible on the machine that's hosting it, that's not a problem.
而且我知道图像只会在托管它的机器上可见，这不是问题。
采纳答案by William Yang
Your file needs to be located inside your www directory. For example, if you're using wamp server on Windows, j3evn.jpg should be located,
您的文件需要位于 www 目录中。例如，如果您在 Windows 上使用 wamp 服务器，则应位于 j3evn.jpg，
C:/wamp/www/img/j3evn.jpg
and you can access it in html via
你可以通过 html 访问它
<img class="sealImage" alt="Image of Seal" src="../img/j3evn.jpg">
Look for the www, public_html, or html folder belonging to your web server. Place all your files and resources inside that folder.
查找属于您的 Web 服务器的 www、public_html 或 html 文件夹。将所有文件和资源放在该文件夹中。
Hope this helps!
希望这可以帮助！
回答by user1751104
My images were not getting displayed even after putting them in the correct folder, problem was they did not have the right permission, I changed the permission to read write execute. I used chmod 777 image.png. All worked then, images were getting displayed. :)
即使将图像放入正确的文件夹后，我的图像也没有显示，问题是它们没有正确的权限，我将权限更改为读写执行。我使用了 chmod 777 image.png。然后一切正常，图像正在显示。:)
回答by Yotam
It wont work since you use URL link with "file://". Instead you should match your directory to your HTML file, for example:
它不会工作，因为您使用带有“file://”的 URL 链接。相反，您应该将您的目录与您的 HTML 文件相匹配，例如：
Lets say my file placed in:
假设我的文件放在：
C:/myuser/project/file.html
And my wanted image is in:
我想要的图像在：
C:/myuser/project2/image.png
All I have to do is matching the directory this way:
我所要做的就是以这种方式匹配目录：
<img src="../project2/image.png" />
回答by Chris Hayes
my problem was not including the ../ before the image name
我的问题不包括图像名称之前的 ../
background-image: url("../image.png");
回答by shubham1js
The simple solution is:
简单的解决方法是：
1.keep the image file and HTML file in the same folder.
1.将图片文件和HTML文件放在同一个文件夹中。
2.code: <img src="Desert.png">// your image name.
2.code: <img src="Desert.png">// 你的图片名称。
3.keep the folder in D drive.
3.将文件夹保存在D盘。
Keeping the folder on the desktop(which is c drive) you can face the issue of permission.
将文件夹保留在桌面（即 c 盘）上，您可能会面临权限问题。
回答by Kevin
You can try just putting the image in the source directory. You'd link it by replacing the file path with src="../imagenamehere.fileextensionIn your case, j3evn.jpg.
您可以尝试将图像放在源目录中。您可以通过将文件路径替换为src="../imagenamehere.fileextensionj3evn.jpg 来链接它。
回答by Manish Kumar
In your angular.json folder structure should be like this
在你的 angular.json 文件夹结构应该是这样的
"assets": [
"src/assets",
"src/favicon.ico"
],
not this
不是这个
"assets": [
"src/favicon.ico",
"src/assets",
],
This solved my problem.
这解决了我的问题。
