CODEWITHSUNDEEP
javascriptphplaravel
Mamulasa
Mamulasa

Reputation: 543

Laravel Images in Public Folder

I am trying to integrate innovastudios contentbuilder.js (http://innovastudio.com/content-builder.aspx) in my existing laravel 5 project and facing some issues. The JS is working properly, but I am missing some pictures from my public folder.

my site structure is:

edit.blade.php inside here I am loading the contentbuilder.js especially a snippets file (snippet.blde.php). This contains all elements that I want to drag&drop

The snippets.blade.php file is located inside: public/backend/contentBuilder/assets/

The code to load the snippets.blade.php is:

jQuery(document).ready(function ($) {
          $("#contentarea").contentbuilder({
              //snippetFile: 'assets/minimalist-basic/snippets.html',
                        snippetFile: "{{asset('backend/contentBuilder/assets/simple/snippets.blade.php')}}",
              snippetOpen: true,
              toolbar: 'left',
              iconselect: 'assets/ionicons/selecticon.html'
          });
      });

In my snippets.blade.php I have referenced all images with {{asset('')}} This is my snippets.blade.php:

    <div data-thumb="{{asset('backend/contentBuilder/assets/simple/thumbnails/theme1_thumb.png')}}">
      <div class="container">
          <div class="row" style="height: 900px; width: 635px; overflow: hidden; margin: auto;">
            <img class="img-noscale" src='{{asset('backend/contentBuilder/assets/simple/images/6.jpg')}}' style="height: 100%; width: 100%; position: relative;" />
          </div>      
      </div>
    </div>

What I get in my view is an error with: "http://localhost:8000/backend/flyers/10/%7B%7Basset('backend/contentBuilder/assets/simple/thumbnails/theme1_thumb.png')%7D%7D 404 (Not Found)"

It looks like {{assets('...')}} is not pointing to my public folder! Any idea why?

Upvotes: 0

Views: 5110

Answers (1)

GokulSrinivas
GokulSrinivas

Reputation: 383

I think the problem lies in the JS code snippet that you have provided.

Instead of defining the snippetFile with the asset() helper,

In your file.blade.php add this snippet at the beginning inside the <head> tag.

So, your blade looks like this

<head>
<script> var base_url = "{{asset('/')}}"; </script>
...
... your script file included here
</head>

And in your JS code

jQuery(document).ready(function ($) {
          $("#contentarea").contentbuilder({
              //snippetFile: 'assets/minimalist-basic/snippets.html',
                        snippetFile: base_url + "backend/contentBuilder/assets/simple/snippets.blade.php",
              snippetOpen: true,
              toolbar: 'left',
              iconselect: 'assets/ionicons/selecticon.html'
          });
      });

Also, I think there might be another small problem.

The blade.php is not processed if it is not returned via the view() through a controller.

So, add a method in your controller that processes the blade like so

function returnThumbnail(Request $request) {
return view('snippet');
}

Make sure the snippet.blade.php is in the resources/views folder.

Then add a route like so

Route::get('/path/to/snippet', 'YourController@returnThumbnail');

And, in your Javascript,

jQuery(document).ready(function ($) {
          $("#contentarea").contentbuilder(
              snippetFile: base_url + "path/to/snippet",
              snippetOpen: true,
              toolbar: 'left',
              iconselect: 'assets/ionicons/selecticon.html'
          });

Upvotes: 3

Related Questions