Lumen's url() function performing strangely

Question

I recently did a fresh install of Lumen framework and started building a site from it. Yes I know lumen is designed only for APIs but please help me out with this.

I have placed all my views inside /resources/views and my templates inside /resources/views/templates.

Now since I had to place [css/js/images] somewhere, I thought placing all of that in public/assets/[css/js/images] would be nice.

Now in my layout when I am trying to include css - I use something like this -

<link href="{{ url('assets/css/something.css') }}">

and it works giving an output of something like this -

<link href="localhost/assets/css/something.css">

same thing works for js also but it gets strange when I try to include images. For including an image I write something like -

<img src ="{{ url('assets/images/someimage.jpg') }}"

and when I view page source, output is as I expect it to be -

<img src="localhost/assets/images/someimage.jpg">

but my console fires 404 not found errors stating someimage.jpg not found. And when I crosscheck by inspecting the image's parent, the Url is totally different soemthing like this -

<img src="localhost/images/someimage.jpg">

See, automatically omitting 'assets' from image url and resulting in 404, but I can see correct url when I view page source.

Things I tried to resolve the issue -

1. Cleared cache and reloaded the page.

2. Tried using asset() instead of url() but prototype of that was removed from lumen.

3. Pull out [css/js/images] folder from assets and pasted them in parent i.e. public. This worked but then the question is why did the previous setup worked find for both css and js and caused problem only with images ?

My other questions are -

1. How can the url in page source be different from the one being rendered ? Just to mention in my case the url in page source worked and displayed image but since the url being renderred omitted 'assets' from path hence resulted in 404.

2. Is there any other good way to include these assets in views. If yes then please also mention where to put them ?

Attaching some images/code for reference.

Output of rendered page showing 404 errors for images but none for css.

Output of view page source windows showing asset included in image path

Answer 1

No clue if this is right, but I believe you actually need to put an image stream inside that URL. Now the server is trying to retrieve some byte encoded object that isn't there.

I have no idea if it's the same case for you, but I've had many instances where I had to put in image streams instead of URLs, which I've solved this way using this library:

Routes.php

/**
* Image handling routes.
* These make sure images actually are images instead of bytecode
*/
Route::get('organization/logo/{logo}', function($logo) {
    $file = Image::make(Storage::disk('logo-image')->get($logo));
    return $file->response();
});

View

<img src="{{ asset('organization/logo/' . $organization->logo_path) }}" alt="">

I might be completely off, but I recognize what's happening with your app and this took care of the issues when I implemented it.

Answer 2

Check your web server configuration. It sounds like you have some type of redirect setup that redirects assets/images/* to just images/*.

As a simple test, open your "Network" tab and navigate your browser to http://samplelumena.local/assets/images/footer1.jpg. I'm guessing the Network trace will show a 30x (301, 302, etc.) to http://samplelumena.local/images/footer1.jpg, followed by the 404 for that url.