Angularjs /assets/images中的Rails 5 ui-icons.png文件是否由Rails 5提供服务?
使用带有AngularJS和引导的Rails 5 我有一个指令生成一个表单,它使用我从ui-icons_444444_25x240.png获取的图标 此文件位于app/assets/images中,但系统似乎无法找到它。我在控制台中遇到以下错误:Angularjs /assets/images中的Rails 5 ui-icons.png文件是否由Rails 5提供服务?,angularjs,ruby-on-rails-5,angular-ui-bootstrap,Angularjs,Ruby On Rails 5,Angular Ui Bootstrap,使用带有AngularJS和引导的Rails 5 我有一个指令生成一个表单,它使用我从ui-icons_444444_25x240.png获取的图标 此文件位于app/assets/images中,但系统似乎无法找到它。我在控制台中遇到以下错误: angular-animate.self-4159531cc5685b66e6cdfd76c35d196124b4dde2fa449ceca973e3af2b070f66.js?body=1:766 GET http://localhost:3000/
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>`;
函数模板ConstantsModal(项目名称){
让按钮选项=“确定”;
返回`
${projectName}的预算常量
单击“添加新的”添加预算常量
常数
价值
{{obj.name}
{{obj.value}}
__________________________
新增
取消
`;
}
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>
我不确定这是否应该这样做,但我能够通过a)创建子目录资产/样式表/图像并将文件ui-icons_444444_246x240.png放入其中,然后修改application.css以包含该指令来解决这个问题
*= require_directory ./images
看起来有点像黑客,但至少能奏效
如果有人知道这应该怎么做,请建议