时间戳

首页 > 解决方案 > Rails 5 不提供 /assets/images 中的 Rails 5 ui-icons.png 文件？

angularjs - Rails 5 不提供 /assets/images 中的 Rails 5 ui-icons.png 文件？

问题描述

使用带有 AngularJS 和 Bootstrap 的 Rails 5。

我有一个指令生成一个表单，该表单使用我从 ui-icons_444444_25x240.png 获得的图标。

此文件位于 app/assets/images 中，但系统似乎无法找到它。我在控制台中收到以下错误： 

angular-animate.self-4159531cc5685b66e6cdfd76c35d196124b4dde2fa449ceca973e3af2b070f66.js?body=1:766 GET http://localhost:3000/assets/images/ui-icons_444444_256x240.png 404 (Not Found)

这是寻找图标的指令：

function templateConstantsModal(projectName) {
let buttonCaption = "OK";
return `<div class="modal-header"> 
  <h5 class="modal-title bold" id="modal-title">Budget Constants for ${projectName}</h5>
  </div>
  <div class="modal-body" id="modal-body">

      <p class="italic" ng-if="$ctrl.list.length == 0">Click <strong>Add New</strong> to add a budget constant</p>

     <div class="container col-sm-12" ng-if="$ctrl.list.length>0">
       <div class="row bold">
         <div class="col-sm-5">Constant</div>
         <div class="col-sm-5">Value</div>
         <div class="col-sm-2"></div>
       </div>

       <div class="row"  ng-repeat="obj in $ctrl.list">
         <div class="col-sm-5">{{obj.name}}</div>
         <div class="col-sm-4">{{obj.value}}</div>
         <div class="col-sm-3"> 
         <span class="ui-icon ui-icon-pencil" ng-click=$ctrl.edit(obj.name)></span>
           <span class="ui-icon ui-icon-circle-close" ng-click=$ctrl.delete(obj.name) ></span>
          </div>
       </div>
     </div>

  </div>
  <div class="center">__________________________</div>
  <div class = "modal-footer" id="modal-footer">

      <button class="btn btn-primary" type="button" ng-click="$ctrl.addNew()">Add new</button>
      <button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
  </div>`;

}

Chrome 开发人员工具的网络窗格似乎显示了在我的本地计算机上找不到的文件，但它显然在那里。我已将带有此 .png 文件的图像文件夹的副本放在其他目录中（与脚本相同的目录、public/images 等，但它似乎没有在那里查找。

我在google dev tools的网络面板中看到的唯一奇怪的是，这个.png文件的filetyhpe由于某种原因被标记为“text/html”，尽管文件名本身是正确的，并且文件具有正确的图像内容.

开发者面板

这是根目录的文件树：

在此处输入图像描述

使用图标的代码：

      <div class="col-sm-3"> 
         <span class="ui-icon u**i-icon-pencil"** ng-click=$ctrl.edit(obj.name)></span>
           <span class="ui-icon ui-icon-circle-close" ng-click=$ctrl.delete(obj.name) ></span>
          </div>
       </div>
     </div>

标签： angularjsruby-on-rails-5angular-ui-bootstrap

解决方案

我不确定这是应该做的方式，但我能够通过以下方式解决这个问题：a）创建一个子目录 assets/stylesheets/images 并将文件 ui-icons_444444_246x240.png 放入其中，然后修改应用程序。 css 包含指令

*= require_directory ./images

似乎有点像黑客，但至少它有效。

如果有人知道这应该怎么做，请指教。

推荐阅读