2014-02-14 27 views
13

現在看來,在使用資產管道和sprocket-rails gem的Rails 4中,當處理圖像時,它們的文件名會附加像css和javascript這樣的md5指紋。雖然這是有道理的,因爲md5 fingerprints are awesome,它使得越來越難以從JavaScript訪問該圖像。在rails 3.2中,我可以通過/assets/image_name.jpg訪問映像,它可以正常運行,但是在資產不存在的rails 4中,它只與名稱中的md5指紋一起存在。在Rails 4中從javascript訪問生產中的圖像

我知道rails通過erb <%= asset-url("image_name.jpg") %>提供助手來訪問圖像,但這在JavaScript中並不理想,因爲我沒有在我的js中使用erb。有很多方法可以用視圖中的數據屬性來破解,或者在我的視圖中使用腳本標記並設置一些全局變量,但是我正在尋找一個很好的解決方案(如果存在)。

任何幫助表示讚賞,感謝。

回答

0

爲什麼你需要使用資產管道的圖像?我得到了哈希行爲。但通常資產將被預處理。如果您將圖像置於公共層次結構中,您將獲得正常的路徑路由。

下面是Asset Pipleline指南中的一段引文,我認爲這可能是密切相關的。 「資產仍然可以放置在公共層次結構中,公共層級中的任何資產都將作爲應用程序或Web服務器的靜態文件提供,您應該使用應用程序/資產來處理必須經過預處理才能提供服務的文件。

+0

如果我想利用圖像資源的指紋來打破更新緩存?如何從JavaScript變量訪問指紋圖像? – Micah

+0

我正在尋找同樣的東西,我發現這一點。它符合你的要求。 https://github.com/johnnypez/assets_js。 –

0

不幸的是,我認爲你堅持要麼將ERB擴展添加到JS並使用資產助手,要麼不使用資產管道。

0

當你說「我沒有在我的js中使用erb」時,你的意思是你不想,或者只是說你不是?因爲你能!

如果使用擴展.js.erb重命名相關的JS文件,那麼你可以使用asset_url助手在這些文件中,像這樣:

var src = "<%= asset_url('photo.jpg') %>"; 
+0

如果你正在處理大量圖像並動態地填充src(在JS中),而不是像你一樣對其進行硬編碼,那麼這不是一個好的選擇。 –

1

另一種選擇要考慮(雖然我不會推薦它)是在您的應用程序控制器中使用自定義路由來爲您在控制器中獲取資產路徑,並使用md5散列將url返回給資產,或者可能只是呈現資產的原始二進制數據(儘管這會增加處理開銷應用)。

例如,你做一個AJAX get請求 http://yourapp.com/images?file=my_image.jpg

然後在你的控制器的操作方法是這樣的:

def images 
    ActionController::Base.helpers.asset_url(params[:file]) 
end 

這會再回到資產的URL路徑。這種方法的缺點是它要求你在JS端做兩個請求。第一個獲取資產的路徑,第二個實際加載該資產和返回的路徑。

爲了將其降低到一個請求,您可以讓應用程序從文件系統讀取圖像並返回正確的標題,以便瀏覽器認爲它是一個正在返回的圖像,因此將呈現提供的url。但是,這對於應用程序來說還有很多工作要做,而且服務器上還有更多不需要的磁盤IO。

可能需要爲每個圖像兩個請求,客戶端上實現你想要什麼,但你必須從某個地方犧牲......

+0

這可以通過使用'redirect_to'來簡單地將瀏覽器請求重定向到正確的資源來處理「JS端的一個請求」。雖然技術上它仍然是兩個請求,但您不需要再編寫任何JS代碼來處理它。你會: 'redirect_to ActionController :: Base.helpers.asset_url(params [:file])'...但繞過資產管道將有問題(緩存等),所以它絕對不建議實際生產使用。一次性和簡單的讓我看看這種產品的測試應該沒問題。 –

+0

Yea @KarlWilbur是對的,redirect_to似乎是一個更清潔的解決方案。 –

相關問題