how to use backend images in frontend

Yii 2.0 General Discussions
1

So I need to display images stored in backend/web/uploads to frontend views. I did some digging and found this post and example of asset publishing.

The recommended way to display an image from backend into frontend seems to be through asset publishing, but there are no full examples using images in the guide or in any of the posts.

I have no idea what I’m doing wrong, I’m not getting any error messages or even a broken image link.

Here is my code:







class ImageAsset extends AssetBundle

{

    public $sourcePath = '@backend/web/';

 

    


    public function init()

    {

        parent::init();

        $this->publishOptions['beforeCopy'] = function ($from, $to) {

            $dirname = basename(dirname($from));

            return $dirname === 'uploads';

        };

    }

}

And to call in the view:





<?php


  use yii\helpers\Html;

  use frontend\assets\ImageAsset;

    

   $bundle = ImageAsset::register($this);


   echo Html::img($bundle->sourcePath.'/collation.jpg');

   

  

?>

In the above example, I have an image named collation.jpg that resides in backend/web/uploads. I want to display it from a view in the frontend. The ImageAsset class is located in frontend/assets.

Also, I tried the following in the view:





echo Html::img($bundle->sourcePath.'/assets/collation.jpg');

No luck with that either.

2

In my backend config i use




'components' => [

   	//can name it whatever you want as it is custom

    	'urlManagerFrontend' => [

        	'class' => 'yii\web\urlManager',

        	'baseUrl' => 'myfrontend/absolutepath/uploads/',//i.e. $_SERVER['DOCUMENT_ROOT'] .'/yiiapp/web/'

        	'enablePrettyUrl' => true,

        	'showScriptName' => false,

    	],

],

In my frontend config i use




'components' => [

   	//can name it whatever you want as it is custom

    	'urlManagerBackend' => [

        	'class' => 'yii\web\urlManager',

        	'baseUrl' => 'mybackendend/absolutepath/uploads/',

        	'enablePrettyUrl' => true,

        	'showScriptName' => false,

    	],

],

then you can call it like




Yii::$app->urlManagerFrontend->baseUrl;


Yii::$app->urlManagerBackend->baseUrl;

In your case in the frontend




Html::img(Yii::$app->urlManagerBackend->baseUrl.'/uploads/collation.jpg');

I use this currently and it works even if your folder structure changes i.e. i put it on shared hosting and my folder structer is

  • server root

[list]

  • frontend web root[list]
  • back end web root

[*] yii core, my uploads, etc.[/list][/list]it also works in default folder structure too.

3

Seems like your solution should work, but it’s not working for me. I’m probably close.

Is set my base url:





'baseUrl' => 'c:/var/www/mydomain/backend/web',

Then in the view, I tested:





echo Yii::$app->urlManagerBackend->baseUrl.'/uploads/collation.png';

It prints:




c:/var/www/mydomain/backend/web/uploads/collation.png

Now when I put that in an image tag:





echo   Html::img(Yii::$app->urlManagerBackend->baseUrl.'/uploads/collation.png');

I get nothing, not even a broken image.

If I pop into the browser:




c:/var/www/mydomain/backend/web/uploads/collation.png

I see the image, but obviously this is not within Yii2. It’s probably my path, just not sure what is wrong…

4

I also referenced this post. The idea there is to create an alias in common/config/bootstrap:





Yii::setAlias('@imagesurl', dirname(dirname(__DIR__)) . '/backend/web');

It formats the first part with \ so I flipped it around:







$imagePath = \yii::getAlias('@imagesurl');

 $imagePath = str_replace('\\', '/', $imagePath); 

   

 echo   Html::img($imagePath .'/uploads/collation.png');

I don’t even get a broken image, but when I view page source, it seems to be there:


<img src="C:/var/www/mydomain/backend/web/uploads/collation.png" alt="">

[size="2"]strange stuff…[/size]

5

SOLVED:

I just had to find the right path:





'baseUrl' => 'http://backend.mydomain.com',

This is because my backend host entry points to web.

@skworden thank you for your help, I really appreciate it.

6

Sorry for the late reply. I’m glad you solved it!

I ended up doing something similar to what you did when I uploaded my advanced app to godaddy last week.

The site is accessed like

frontend is

myapp.com

backend is

myapp.com/mybackend

folder are

  • server root
  • frontend web root[list]
  • back end web root

[*] core/fileuploads/everything except for theme js/css/images// can only be accessed by the server[/list]

I ended up setting a path for uploading files like i did above, however this didn’t work for viewing the files due to how the hosting is set up.

To get around this and keeping yii2 core and application files out of the web directory I set up a sub domian.

The subdomain does 2 things;1. it makes it so only the server can only access the files. 2. it acts as a cookie-less domain saving bandwidth.

My sub domain is

static.mysite.com

the root is set to the core / uploads etc folder i.e.

so it’s real path is

root/corefiles/someRandomUploadFolderName

  • server root

  • frontend web root[list]

  • back end web root

[*]core/fileuploads/everything except for theme js/css/images[/list]

then when i need files i just access them like

static.mysite.com/somefile.pdf

since the subdomain is pointed to root/core/uploads you don’t put the folder name it in the url path.

It is also not accessable via browser url for two reasons:

  1. static.mysite.com/uploads /somefile.pdf because that path really equals static.mysite.com/uploads /uploads /somefile.pdf due to the subdomain being pointed to that folder so that folder doesn’t exsist.

2.Most importantly request from mysite.com are the only request allowed to the subdomain.

7

@skworden thanks, I will keep this in mind for deployment. Thanks again for the follow-up and thorough response.