公共文件夹中的 Laravel 图像答案

【问题标题】：Laravel Images in Public Folder公共文件夹中的 Laravel 图像
【发布时间】：2017-02-03 22:05:00
【问题描述】：

我正在尝试将 innovastudios contentbuilder.js (http://innovastudio.com/content-builder.aspx) 集成到我现有的 laravel 5 项目中并面临一些问题。 JS 工作正常，但我的公用文件夹中缺少一些图片。

我的网站结构是：

edit.blade.php 在这里我正在加载 contentbuilder.js，尤其是一个 sn-ps 文件 (sn-p.blde.php)。这包含我要拖放的所有元素

sn-ps.blade.php 文件位于里面：public/backend/contentBuilder/assets/

加载sn-ps.blade.php的代码是：

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'
          });
      });

在我的 sn-ps.blade.php 中，我使用 {{asset('')}} 引用了所有图像这是我的 sn-ps.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>

在我看来，这是一个错误： “http://localhost:8000/backend/flyers/10/%7B%7Basset('backend/contentBuilder/assets/simple/thumbnails/theme1_thumb.png')%7D%7D 404（未找到）”

看起来 {{assets('...')}} 没有指向我的公用文件夹！知道为什么吗？

【问题讨论】：

你上面提到的js代码sn-p是否存在于sn-ps.blade.php中？
尝试运行 php artisan laroute:generate - 如果你在构建 JS 路由助手中使用 laravel 的，你偶尔需要在移动路径时重新生成它。
@carl：命令“route:generate”未定义。你的意思是其中之一吗？事件：生成密钥：生成路由：列出路由：清除路由：缓存
@GokulSrinivas：没有 sn-ps 不包含 JS。只是 HTML 标记。我已经更新了我最初的帖子，内容是 sn-p.blade.php
@Mamulasa：快速提问。 Javascript 不在任何blade.php 文件中。这意味着它不会被刀片模板引擎处理。那么如何将 {{asset('your/path/')}} 替换为实际路径？

标签： javascript php laravel

【解决方案1】：

我认为问题在于您提供的JS代码sn-p。

而不是使用asset() 帮助器定义 sn-pFile，

在您的file.blade.php 中，在<head> 标记内的开头添加这个sn-p。

所以，你的刀片看起来像这样

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

在你的 JS 代码中

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'
          });
      });

另外，我认为可能还有另一个小问题。

如果view() 没有通过控制器返回，则不会处理blade.php。

所以，在你的控制器中添加一个方法，像这样处理刀片

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

确保snippet.blade.php 位于resources/views 文件夹中。

然后像这样添加一条路线

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

而且，在您的 Javascript 中，

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

【讨论】：

资源解释为样式表，但使用 MIME 类型 text/html 传输：“localhost:8000/come/base_url”。？错误信息，不知道为什么？当我在css中使用 PS：js在public/js/....