HTML <img> 标签在 localhost 中不能正常工作？答案

【问题标题】：HTML <img> tag is not working properly in localhost?HTML <img> 标签在 localhost 中不能正常工作？
【发布时间】：2019-08-08 14:13:57
【问题描述】：

我在一个网站上工作，我使用xammp 作为本地主机服务器。我使用的文件夹是website，其中包含两个子文件夹content 和main。我的content 文件夹中有一张图片logo.png。我想在main 文件夹中创建一个 php 文档来查看图像。为此我使用过

<body>
  <img src="<?php echo dirname(__FILE__,2);?>/content/logo.png" >
</body>

但此代码不起作用，并在 Microsoft 边缘显示一个带有十字箭头符号的小黑框。谁能告诉这里的错误是什么？

【问题讨论】：

为什么要在里面使用php？
您为此使用 php 有什么原因吗？你在源代码上看到了什么？
您可以使用下面的代码使其工作。但是，如果您想知道错误，则必须给我们__FILE__的值
@MartinDimitrov @Mark_Ed @Masivuye 好的。使用 php 是因为我希望动态定位图像并且 src 变为 E:xampp/htdocs/website/content/logo.png 这是图像文件所需的路径。

标签： php html image localhost

【解决方案1】：

解决此问题的最佳方法是在项目根目录中使用settings.php 或config.php 或您希望如何命名的文件，在您的情况下为website 目录。

在根目录下创建的文件可能是这样的

define('ROOT_DIR', __DIR__);

define('SITE_DOMAIN', 'http://localhost/website');

define('SITE_DIR', '/website');

define('CONTENT_DIR', SITE_DIR . '/content');

//more settings/configs......

上面的文件示例应该只包含项目的定义（路径、域、电子邮件等），并且应该包含在您创建的每个其他 php 文件的开头。

然后您在main 目录中创建您的php 文件。假设您将其命名为 image.php，它应该看起来像这样

<?php
require '../config.php';

//...some php code here....
?>

<!-- ...some html code here... -->

<img src="<?= SITE_DOMAIN ?>/content/logo.png">

<!-- ..more html code here... -->

以上只是一个示例，您可以随意构建文件。

以下是一些示例，说明如何使用上述示例执行此操作。

使用示例1

<img src="<?= SITE_DOMAIN ?>/content/logo.png">

源输出：http://localhost/website/content/logo.png

使用示例 2（可能是最佳选择）

<img src="<?= SITE_DIR ?>/content/logo.png">

源输出：/website/content/logo.png

示例使用3

<img src="<?= CONTENT_DIR ?>/logo.png">

源输出：/website/content/logo.png

避免使用.. 访问HTML 中的内容文件，这是不好的做法，请不要使用dirname(__FILE__,2)，这真的很糟糕。我说你不应该使用它，因为你能想象例如在那个页面上有 20 张图片，这意味着你将调用 dirname 20 次和 __FILE__ 20 次以始终获得相同的结果。

如果在某个时候这个项目变得非常大并且你开始移动和重命名 php 文件，那么上面的例子也很好，你可以放心，你的图像总是可以工作的。

如果这只是一个小项目，并且您不需要我上面建议的任何内容，您可以在main 目录中创建的 php 文件中尝试类似的操作。

<?php
define('CONTENT_DIR', '/website/content');
?>

<img src="<?= CONTENT_DIR ?>/logo.php">

注意：我使用<?= ?> 而不是echo，两者的作用完全相同。随意更改为<?php echo '' ?>

【讨论】：

【解决方案2】：

你可能没有 PHP 来定位 logo.png，只是使用 ../ 来改变当前目录。

【讨论】：