用blob替换背景图像：url [英] Replace background image with a blob:url

问题描述

这看起来应该没问题，但事实并非如此。





所以我正在使用一个非常时髦的文件/图像上传提供商 GitHub - danialfarid / ng-file-upload：轻量级Angular指令，用于上传带有可选FileAPI垫片的文件，以支持跨浏览器支持 [ ^ ]



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


他们可以通过勾选预览复选框来预览页面上的徽标。这将更新页面上的徽标和图标。



[以下代码]



按照我试过的代码注释：图像没有变化！



我通过chrome检查器将网址添加到元素中，检查了网址是否有效。那里没问题。



那么我做错了什么：S



谢谢

Andy



我尝试过：



徽标在$（。main-logo）上作为背景图片：

Hi,

This seems like it should work no problem, yet it just doesn't.


So I'm using a very funky file / image upload provider GitHub - danialfarid/ng-file-upload: Lightweight Angular directive to upload files with optional FileAPI shim for cross browser support[^]

I am going to use this to allow my customers to choose their own logo and favicon.

They can preview the logo on the page by checking the preview checkbox. This will update the logo and favicon image on the page.

[Code below]

As per the "What I have tried" code comments: The image does not change!

I checked that the url is valid by adding it to the element via chrome inspector. No problems there.

So what am I doing wrong :S

Thanks
Andy

What I have tried:

The logo is on $(".main-logo") as a background image:

$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);
            }
        }
    });
}

推荐答案

（。main-logo）作为背景图片：

(".main-logo") as a background image:

scope.logoChanged = function （）{
Upload.dataUrl（

scope.logoChanged = function () { Upload.dataUrl(

scope.file， false ）。then（（fileUrl）=> {
// fileUrl：blob：https：//d15461a6.ngrok.io/eb87daf2-8581-4a83-a4d4 -35ed19e18903
if （

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

这篇关于用blob替换背景图像：url的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！