更換背景圖像與斑點：URL

我使用了一個非常時髦的文件/圖片上傳提供商GitHub - danialfarid/ng-file-upload: Lightweight Angular directive to upload files with optional FileAPI shim for cross browser support [^]更換背景圖像與斑點：URL

我要利用這個，讓我的客戶選擇他們自己的標誌和圖標。

他們可以通過選中預覽複選框來預覽頁面上的徽標。這將更新頁面上的徽標和圖標。標誌是$（「主標識」。）作爲背景圖像：

$scope.logoChanged = function() { 
    Upload.dataUrl($scope.file, false).then((fileUrl) => { 
//fileUrl: "blob:https://d15461a6.ngrok.io/eb87daf2-8581-4a83-a4d4-35ed19e18903" 
    if ($scope.file) { 

     const logo = $('.main-logo'); // logo div 
     if ($scope.previewImage) { //checkbox model 
      const url = 'url("'+fileUrl+'") !important'; 
      logo.css("background-image", url); 
//url: url("blob:https://d15461a6.ngrok.io/eb87daf2-8581-4a83-a4d4-35ed19e18903") !important 
      console.log(logo.css("background-image")) 
//logo.css("background-image"): url(/Resources/images/ebLicence.png) 
     } else { 
      logo.css("background-image", logoBgImage); 
     } 
    } 
    }); 
}

按照代碼註釋：圖像不會改變！

我通過將Chrome瀏覽器添加到元素來檢查url是否有效。那裏沒有問題。

我在做什麼錯？

來源

2017-02-20 GreysonTyrus

默認情況下，瀏覽器會緩存圖片，因此儘管您正在替換源url，但瀏覽器不會更新圖片。

您可以在網址的末尾添加一個隨機數，以便瀏覽器更新它，例如

var random = Math.random(); url("'+fileUrl+'?v"+random)

或只是爲了安全起見，你可以創建一個新的IMG，並通過使用.replaceWith()取代你在瀏覽器中的一個。

來源

2017-02-20 12:42:29

嗯，這是關於角偉大的事情。它將更新緩存的圖像。問題是，CSS沒有更新。我會嘗試replaceWith（）。它不會花很長時間來嘗試^ _^ – GreysonTyrus

另外，源代碼正在改變：url（/Resources/images/ebLicence.png）到url（「blob：https：//d15461a6.ngrok.io/eb87daf2-8581- 4a83-a4d4-35ed19e18903" ） – GreysonTyrus

好的 - 設法讓它工作。

而不是使用CSS（道具，VAL）我用attr的（「風格」，「道具：VAL;」）

我與replaceWith組合使用，但我不認爲我會需要

不知道爲什麼的CSS沒有工作

感謝斯塔夫羅斯對他的關注^ _^

來源

2017-02-20 13:16:56 GreysonTyrus

更換背景圖像與斑點：URL

回答

相關問題