Question

我使用非常时髦的文件/图片上传提供商GitHub - danialfarid/ng-file-upload: Lightweight Angular directive to upload files with optional FileAPI shim for cross browser support [^]

我将使用它来允许我的客户选择他们自己的徽标和图标。

他们可以通过选中预览复选框来预览页面上的徽标。这将更新页面上的徽标和图标。徽标位于$（＆＃34; .main-logo＆＃34;）上作为背景图片：

$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添加到元素中，检查了url是否有效。没问题。

我做错了什么？

Answer 1

默认情况下，浏览器会缓存图片，因此尽管您要更换源网址，但浏览器仍然无法更新图片。

您只需在网址末尾添加一个随机数，以便浏览器对其进行更新，例如

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

或者为了安全起见，您可以使用.replaceWith()创建新的img并替换浏览器中的img。

Answer 2

好的 - 设法让它发挥作用。

我没有使用css（prop，val），而是使用了attr（＆＃39; style＆＃39;，＆＃34; prop：val;＆＃34;）

我在与replaceWith的组合中使用它，但我认为我不需要

不知道为什么.css没有工作

感谢Stavros的关注^ _ ^

用blob替换背景图像：url

2 个答案: