轨图像资产角指令和模板 [英] Rails Image assets in Angular Directive and template

问题描述

我有轨道4用这些宝石角的js应用

I have Rails 4 Application with Angular js using these gems

• 创业板angularjs护栏


• 创业板角轨模板


• 创业板asset_sync

这与模板的伟大工程，像

It works great with template like

    <img ng-controller='LikePostController'  
       ng-dblclick='like(post);' 
       ng-src='{{post.photo.standard}}' 
       class='lazy post_photo pt_animate_heart'
       id='post_{{post.id}}_image'
     />

图片正确呈现。然而，在我的其他的js

The Image render correctly. However in my other js

petto.directive('ptAnimateHeart', ['Helper', function(Helper){
    linkFunc = function(scope, element, attributes) {
      $heartIcon = $("#heart_icon");

      if($heartIcon.length == 0) {
        $heartIcon = $("<img id='heart_icon' src='/assets/feed.icon.heart.png' alt='Like' /> ");
        $(document.body).append($heartIcon);
      }

      element.on('dblclick', function(event){
        $animateObj = $(this);
        Helper.animateHeart($animateObj);
      });
    }
    return { 
      restrict: 'C',
      link: linkFunc
    }

  }])

我的资产/ feed.icon.heart.png'不是从浏览器控制台中发现的错误。我已经feed.icon.heart.png位于下应用程序/资产/ feed.icon.heart.png。

I got 'assets/feed.icon.heart.png' was not found error from the browser console. I have feed.icon.heart.png located under app/assets/feed.icon.heart.png.

PS：忘记提到我使用的资产同步宝石托管资产在Amazon S3中。图像中的发展，但不是在生产中行之有效。

ps: Forget to mention I use assets sync gem to host assets in amazon s3. the image worked well in development but not in production.

推荐答案

硬codeD资产链接只能在发展的工作，因为在生产中取得的资产precompiled。这意味着，除其他事项外，从文件名更改：

Hardcoded asset links only work in development because in production the assets get precompiled. Which means, amongst other things, the filename changes from:

my_image.png

弄成这个样子（它增加了独特的MD5哈希）：

into something like this (it adds and unique md5-hash):

my_image-231a680f23887d9dd70710ea5efd3c62.png

试试这个：

JavaScript文件扩展名更改为： yourjsfile.js.erb

Change the javascript file extension to: yourjsfile.js.erb

和链接：

$ heartIcon = $（＆LT; IMG ID ='heart_icon'SRC ='＆LT;％=图像URL（feed.icon.heart.png）％＆GT;'ALT = 像'/＆gt;中）;

为了更好地理解<一个href=\"http://www.google.com.kh/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0CCgQFjAA&url=http://guides.rubyonrails.org/asset_pipeline.html&ei=AvuLU7OgEsvj8AWDyYHIDQ&usg=AFQjCNEcRFwFyWFL3DaXK1bBI-w0Cah8fg&sig2=gUWqyzestC8nGOzzmXzKWw&bvm=bv.67720277,d.dGc\"相对=nofollow>的资产管道 - Ruby on Rails的指南

这篇关于轨图像资产角指令和模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！