角度JS模板中的圣杯资产图像
我正在使用Grails 2.4.4和AngularJS 1.3.15来创建一个简单的应用程序。为了使模板与Grails一起工作，我使用AngularJS模板资产管道插件2.0.7。
我的第一个原型没有使用ngRoute中的任何路由逻辑。现在我想提取不断增长的应用程序的一部分并将它们放在单独的模板中。这几乎可以工作，但我对图像有一个问题。以前我使用这样的结构将图像作为资产加载：
<img src="${assetPath(src: 'image.png')}">
这确实有效，因为整个应用程序是一个. gsp页面。将代码提取到模板中，这种处理不再发生，图像也不能再被加载。
我目前的解决方法是：
<img src="../assets/image.png">
显然，这种技术有一些缺点。使用相对路径对资产位置进行硬编码可能非常脆弱。我是否错过了一些不错的功能或命令，这些功能或命令可以帮助我在这里将AngularJS与资产管道合并？
共有2个答案
看起来标签和相应的assetPath（）在这方面被破坏了。它们似乎不尊重config.groovy中的serverURL设置，也没有在模板中呈现时正确计算基本路径。
我能够以一种不那么脆弱的方式解决这个问题，使用createLink（）标签来生成我的路径。它修复了资产控制人的名称，但我认为他们不太可能改变这一点。
在我的情况下，我正在解析AJAX回调中的一些标志图像。
<img src='${createLink(controller: "assets", action: "flags/16/US.png")}' />
希望这也适用于您。
我通过在Angularjs项目中添加“AssetService”来解决这个问题。
angular.module('myApp.assets')
.service('AssetService', [ function () {
this.getAssetDir = function() {
return window.grailsSupport.assetsRoot;
};
this.getRootDir = function() {
return window.grailsSupport.root;
};
}]);
这需要Grails布局文件中的一些代码。。。。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><g:layoutTitle default="MyApp"/></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="${assetPath(src: 'favicon.ico')}" type="image/x-icon">
<link rel="apple-touch-icon" href="${assetPath(src: 'apple-touch-icon.png')}">
<link rel="apple-touch-icon" sizes="114x114" href="${assetPath(src: 'apple-touch-icon-retina.png')}">
<!-- add this to your layout -->
<g:javascript>
window.grailsSupport = {
assetsRoot : '${ raw(asset.assetPath(src: '')) }',
root : '${createLink(uri: '/')}'
};
</g:javascript>
<asset:stylesheet src="application.css"/>
<asset:javascript src="application.js"/>
<g:layoutHead/>
</head>
我在另一个堆栈溢出问题的答案中获得了window.grailsSupport代码。
您现在可以使用AssetService在控制器中为您的URL添加前缀…
angular.module('MyApp.profile')
.controller('MyCtrl', [ 'AssetService', '$http', function(AssetService, $http) {
var self = this;
self.pathToAnonProfile = AssetService.getAssetDir() + "ppt_Anonymous.jpg";
$http.get(AssetService.getRootDir() + 'api/v1/users').then(function(response) {
....
}, function(errResponse) {
....
});
}]);
它很可能会得到改进，您仍然需要混合 gsp 和纯 Angular 模板，但它将资产路径保留在单个服务中，可以轻松修改。
-
我有一个奇怪的错误，当我生成战争与圣杯战争指挥官 我不明白为什么这个文件夹会出现问题。我检查了它，但没有任何可疑之处。我测试清洁没有成功。运行应用程序命令工作。 StackTrace出错 war - stacktrace |正在处理1214的第53个文件-yui application/dial/assets/dial-core . CSS . |错误war打包错误:/Users/so vlin/
-
Im将angular-用户界面-bootstrap与Grails 2.3. x asset-管道： 1.6.1插件一起使用。其中一个组件-alert.js正在尝试加载 /template/alert/alert.html，但这解决了404。 我尝试包含grails.assets.includes=[*/。html]，没有帮助。 对此有什么解决方法吗？无论如何，让资产管道包含部分模板？
-
这些都不管用。我希望嵌入这个图像，这样我就不必用发布的图像目录配置web服务器。 我将如何实现这一点？
-
我上面代码的日志是： 数据库也会更新。为什么lock（）不工作？不是在lock（）之后其他实例无法更新吗？还是别的什么？还是我错过了什么？
-
当生成发票的PDF文件时，我试图在Spring后端中使用Angular应用程序中的徽标。 invoice.logo.url=http://localhost:4200/assets/gfx/img/logos/rkmteam-logo.png 该图像不会显示在PDF中，但当我将其上载到imgur时。com，那么它工作得很好。 手动访问url有时会显示图片，但有时会给我这个错误： 如何访问外部应用程
-
本文向大家介绍CSS 使用Flexbox的圣杯布局，包括了CSS 使用Flexbox的圣杯布局的使用技巧和注意事项，需要的朋友参考一下 示例 Holy Grail布局是具有固定高度的页眉和页脚以及中心带有3列的布局。这3列包括一个固定宽度的sidenav，一个流体中心以及一个用于其他内容（例如广告）的列（流体中心在标记中排在最前面）。CSS Flexbox可以通过非常简单的标记来实现此目的： HT