HTML 图像不显示，而 src url 工作

Question

<img class="sealImage" alt="Image of Seal" src="file:///C:/Users/Anna/Pictures/Nikon%20Transfer/SEALS%20PROJECT/j3evn.jpg">

那不显示图像，只显示alt。 但如果我去

file:///C:/Users/Anna/Pictures/Nikon%20Transfer/SEALS%20PROJECT/j3evn.jpg

在浏览器中，图像显示。

我现在在 Windows 机器上的 xampp 上托管它。

我已经尝试过不同的浏览器，并且有和没有 %20 的空间，但我知道 with 是正确的方法。（实际上它适用于两者）

而且我知道图像只会在托管它的机器上可见，这不是问题。

Answer 1

您的文件需要位于 www 目录中。 例如，如果您在 Windows 上使用 wamp 服务器，则应该找到 j3evn.jpg，

C:/wamp/www/img/j3evn.jpg

你可以通过 html 访问它

<img class="sealImage" alt="Image of Seal" src="../img/j3evn.jpg">

查找属于您的 Web 服务器的 www、public_html 或 html 文件夹。 将所有文件和资源放在该文件夹中。

希望这可以帮助！

Answer 2

即使将它们放在正确的文件夹中，我的图像也没有显示，问题是它们没有正确的权限，我将权限更改为读写执行。 我使用了 chmod 777 image.png。 然后一切正常，图像开始显示。 :)

Answer 3

由于您使用带有“file://”的 URL 链接，因此它不会起作用。 相反，您应该将您的目录与您的 HTML 文件相匹配，例如：

可以说我的文件放在：

C:/myuser/project/file.html

我想要的图像在：

C:/myuser/project2/image.png

我所要做的就是以这种方式匹配目录：

<img src="../project2/image.png" />

Answer 4

您可以尝试将图像放在源目录中。 您可以通过用src="../imagenamehere.fileextension替换文件路径来链接它在您的情况下，j3evn.jpg。

Answer 5

我的问题不包括图像名称之前的 ../

background-image: url("../image.png");

Answer 6

我的问题是我在路径前面有/ （资产是一个目录），例如：

<img src="assets/images/logo.png>"是正确的，而

<img src="/assets/images/logo.png>"返回错误。

Answer 7

将图像文件夹的名称更改为 img ，然后使用 HTML 代码

Answer 8

不是这个特定问题的直接答案。 但是，如果您像这样正确地提供图像地址，并且想知道为什么在输出中看不到图像，

<img src ="../../../public/image.jpg"/> 

直接给出图像名称，如

<img src="image.jpg"/>

或者，如果您在public中有一个文件夹，比如说图标，就给它

<img src="/icons/logo.jpg"/>

这是因为，React 已经期望您将所有图像都放在公共文件夹中。 所以你不需要明确地给它。

Answer 9

简单的解决方案是：

1.将图像文件和HTML文件保存在同一个文件夹中。

2.code: <img src="Desert.png"> // 你的图片名称。

3.将文件夹保存在D盘。

将文件夹保留在桌面（即 C 盘）上，您可能会遇到权限问题。

Answer 10

在你的 angular.json 文件夹结构应该是这样的

"assets": [             
  "src/assets",
  "src/favicon.ico"
],

不是这个

"assets": [     
  "src/favicon.ico",
  "src/assets",
],

这解决了我的问题。