如何在 php 文件中包含静态资源，如图像、css 和 javascript答案

【问题标题】：How to include static assets like images, css and javascript in a php file如何在 php 文件中包含静态资源，如图像、css 和 javascript
【发布时间】：2020-09-12 20:34:58
【问题描述】：

一个非常重要的细节是我创建的资产函数返回静态资产的完整路径，而不是php文件位置的相对路径

我做了什么：

public static function asset($url){
        $file_path = __DIR__.'/../../../resources/assets/'.$url;
        $file_path = str_replace("\\","/",$file_path);
        return $file_path;
    }

在包含 html 文件的 index.php 中：

<img width="500px" alt="<?php echo asset('images/image1.jpg');?>" src="<?php asset('images/image1.jpg');?>"/>

它为我提供了 alt 属性中文件的正确完整 URL，但没有显示图像。
它也不适用于 css 和 javascript

资产目录是

"__DIR__.'/../../../resources/assets/'.$url";

$url 是用户给出的参数。
这是 html 页面上返回的文件路径：
c:/xampp/htdocs/project/app/Utilities/View/../../../resources/assets/images/image1.jpg
返回的内容是否可以在我的 index.php 文件中用作图像 src ？？？

【问题讨论】：

您应该提供 Web 服务器配置文件，并最终提供项目的文件系统结构。
__DIR__ 是包含函数定义文件的目录/路径。您可能不希望这里有系统路径。
你没有在你的 src 中回显你的函数的返回。仔细检查生成的路径，它可能不适合作为公共 url。公共网络路径通常不同于系统文件路径。
@dakis，该应用正在开发中。我正在使用 xampp 服务器。
@Progrock，asset 函数工作得很好，它返回文件的完整文件路径，如果我复制返回的文件路径并将其粘贴到浏览器地址框中，它会显示图像，它只是不会在我的浏览器中加载它。另外，我打算使用返回的资产的文件是php文件，这对css和jscript文件有影响吗？

标签： php html css model-view-controller

【解决方案1】：

目前您在 src 中没有输出。您需要回显或打印文件路径：

它应该是（注意回声）：

<img src="<?php echo asset('images/image1.jpg');?>"/>

这也是一个完整的文件路径，可能与协议相关。所以可能会被缝合到您的域中。例如。 http://example.com/path/from/file/system/root/to/assets/images/image1.jpg。如果您包含file:// 协议，它可能会在您自己的网站上的某些浏览器上进行本地开发时工作，但可能不是由于源策略。它肯定不会在公共网络服务器上运行。

例如/var/www/example.com/assets/image.png 是文件路径，如果文档根目录是/var/www/example.com 我们可以使用/assets/image.png 作为网络路径。

我建议将您的所有资产都与您的文档或项目根目录相关。

您可以在项目引导程序中使用类似这样的简单常量：

<?php define('ASSET_ROOT', '/assets'); ?>

那么你的 src 就变成了：

<img src="<?= ASSET_ROOT . '/images/image1.jpg'; ?>"/>

（这里使用短回显<?= 而不是<?php echo。）

这为您提供了一些灵活性。您可以稍后将其换成以下内容：

<?php define('ASSET_ROOT', '//cdn.example.com/assets'); ?>

您当前的资产路径也与包含您的函数的脚本相对。如果你移动它，你必须重写你的函数。该常量的开销较小。

拥有相对于固定根的资产，只沿着树向下移动，远没有那么复杂，也不需要考虑。

【讨论】：

我试过回显，但它仍然没有在网页上输出任何图像，也没有加载我的 css 或 javascript 文件。问题是我正在尝试构建一个框架，并且asset_dir 已经在包含该函数的文件中声明。我希望我的框架的任何用户只需调用asset() 函数并使用它来加载预定义资产目录中的任何静态文件。如果你能帮助我，我什至可以向你展示完整的代码。提前致谢
@SammyDasaolu 如果它是一个文件路径，浏览器可能由于源策略而不会显示它。它也可能使用相对协议。如前所述，使用网络路径。浏览器可能会尝试加载类似http://localhost/file/path/to/assets/image.png 的内容，请检查您的浏览器工具是否有请求。
@SammyDasaolu 是 __DIR__ 你帖子中的红鲱鱼？ __DIR__ 是文件的目录路径。这又是一个文件路径。你的asset_dir 是如何定义的，它是如何使用的，它是什么？它不在您给定的代码中。

【解决方案2】：

asset 函数的问题是 DIR 返回一个本地文件路径，我应该返回的是服务器 url。因此，我替换了这一行

"__DIR__.'/../../../resources/assets/'.$url";

与

http://server_host/resources/assets/".$url

在我的情况下是

http://localhost/project/resources/assets/".$url

并返回该行并且它可以工作。
@Progroc，感谢您的贡献

【讨论】：