根據樣式寬度+高度更改圖像src

Question

我有一個asp.net mvc項目和一個基於url參數流出圖像的函數。例如：/ Image/40/100/50使用ImageID 40,100px寬和50px高的圖像流傳輸圖像。

那麼，有沒有辦法改變：

<img class="image" src="/Content/View?fileID=31" style="width: 500px; height: 100px; " /> 

要：

<img class="image" src="/Image/31/500/100" style="width: 500px; height: 100px; " /> 

在一些奇特的方式？ /拉塞

Answer 1

我不知道我理解爲什麼你要做到這一點，但沿東西線以下應該做的伎倆：

$("img[src^='/Content/View?fileID=']").each(function() { 
    var img = $(this); 
    var id = img.attr("src").substring(21); 
    img.attr("src", "/Image/" + id + "/" + img.width().toString() + "/" + img.height().toString()); 
}); 

鏈接例如：http://jsfiddle.net/Cfdfp/2/

另外，如果你只應用image類的img需要這種轉變的元素，可以簡化上述的選擇：

$(".image").each(function() { 
    var img = $(this); 
    var id = img.attr("src").substring(21); 
    img.attr("src", "/Image/" + id + "/" + img.width().toString() + "/" + img.height().toString()); 
}); 

鏈接例如：http://jsfiddle.net/Cfdfp/1/

Answer 2

如何：

$('img').each(function() { 
    var $this = $(this), 
     id = $this.attr('src').substr($this.attr('src').indexOf('=')+1), 
     wid = $this.width(), 
     hgt = $this.height(); 
    $this.attr('src','/Image/'+id+'/'+wid+'/'+hgt); 
});