How to include static assets like images, css and javascript in a php file

Question

A very important detail is that the asset function I created returns the full path to the static asset not the relative path from the php file position

What I have Done:

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

in my index.php which contains html files:

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

It gives me the correct full url to the file in the alt-property but no image is displayed.
It also does not work for css and javascript

The asset directory is

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

$url is the argument the user gives.
This is the returned file path on the html page:
c:/xampp/htdocs/project/app/Utilities/View/../../../resources/assets/images/image1.jpg
Is what is returned valid to be used as an image src in my index.php file???

You should provide the web server configuration file and, eventually, the file system structure of your project. — PajuranCodes
– PajuranCodes, Commented Sep 12, 2020 at 21:45
__DIR__ is the directory/path containing the file with your function definition. You probably don't want a system path here. — Progrock
– Progrock, Commented Sep 12, 2020 at 22:32
You are not echoing out the return of your function in your src. Double check the resultant path and it will likely not be suitable as a public url. A public web path is usually different to a system file path. — Progrock
– Progrock, Commented Sep 12, 2020 at 22:46
@Progrock, the asset function works beautifully, it returns the full file path to the file, if I copy the file path returned and paste it in a browser address box, it displays the image, it just doesn't load it in my browser. Also, the files I am planning to use the assets returned are php files, does that have an impact on css and jscript files? — Sammy Dasaolu
– Sammy Dasaolu, Commented Sep 13, 2020 at 12:25

Progrock · Accepted Answer · 2020-09-14 15:43:37Z

1

Currently you have no output in the src. You'll need to echo or print the file path:

It should read (notice the echo):

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

Also this is a complete file path, which will likely be protocol relative. So will probably be stitched onto your domain. E.g. http://example.com/path/from/file/system/root/to/assets/images/image1.jpg. If you include the file:// protocol, it may work when developing locally on your own site on some browsers, but may not due to origin policies. It most certainly won't work on a public web server.

e.g. /var/www/example.com/assets/image.png is a file path, if the document root is /var/www/example.com we could just use /assets/image.png as the web path.

I suggest making all your assets relative to your document or project root.

You can use a simple constant instead something like this in your project bootstrap:

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

Then your src simply becomes:

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

(Here using the short echo <?= instead of <?php echo.)

That gives you some flexibility. You could later swap that out for something like:

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

Your current asset path is also relative from the script containing your function. If you move that, you have to rewrite your function. The constant has less overhead.

Having assets relative to a fixed root, only travelling down a tree, is far less complicated and less to think about.

edited Sep 14, 2020 at 15:43

answered Sep 14, 2020 at 9:21

Progrock

7,4831 gold badge21 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sammy Dasaolu Over a year ago

I've tried echoing but it still did not output any image on the webpage, neither did it load my css or javascript files. The thing is I am trying to build a framework and the asset_dir is already declared in the file which contains the function. I want any user of my framework to simply call the asset() function and use that to load any static file inside the pre-defined asset directory. I might even show you the full code if you can help me. Thanks in advance

Progrock Over a year ago

@SammyDasaolu if it's a file path the browser may not show it due to origin policies. It also may be using a relative protocol. As said use a web path. The browser is likely trying to load something like http://localhost/file/path/to/assets/image.png, check your browser tools for requests.

Progrock Over a year ago

@SammyDasaolu is __DIR__ a red herring in your post? __DIR__ is the directory path of the file. Which again is a file path. How is your asset_dir defined, how is it used, and what is it? It is not in your given code.

Sammy Dasaolu · Accepted Answer · 2020-09-16 19:17:19Z

0

The problem with the asset function is that the DIR returns a local file path, what I should returned was the server url. Therefore, I replaced this line

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

with

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

which in my case is

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

and returned that line and it works.
@Progroc, thanks for your contribution

edited Sep 16, 2020 at 19:17

answered Sep 16, 2020 at 19:08

Sammy Dasaolu

171 silver badge6 bronze badges

Collectives™ on Stack Overflow

How to include static assets like images, css and javascript in a php file

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related