CSS image does not show (Google AppScript)

Question

I implemented a loading bar that shows while my script is running in the background in a Google Sheets, almost all the elements used in CSS actually work properly, the only thing that doesn´t work is an image thats suppose to be in the center of the loading bar.

I found out how to actually implement the CSS in Google Appscript here CSS with Google App Script. But whenever I use background-image: url(myimage.png); there is no image shown in the loading bar.

CSS

<!DOCTYPE html>
<html lang="es">
<head>
    <link rel="shortcut icon" href="../assets/images/ico/favicon.ico" />
    <meta name="sitedomain" content="www.sdfsd.com.mx" />
    <meta name="country" content="Am" />
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="stylesheet" type="text/css" href="loader.css"/>
</head>
    <body>  
    <style>
    .text-loader {
    font-family: Arial, sans-serif;
    font-size: 20px;
} 

.loader-align {
    width:100%; 
    height:100%; 
    margin: 0 auto;
}

.center {
    text-align: center;
}

.dextra-d {
    background-image: url(d_icon.png);
    background-repeat: no-repeat; 
    background-position: center;
}

@keyframes lds-double-ring {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes lds-double-ring {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes lds-double-ring_reverse {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@-webkit-keyframes lds-double-ring_reverse {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
.lds-double-ring {
  position: relative;
}
.lds-double-ring div {
  position: absolute;
  width: 160px;
  height: 160px;
  top: 20px;
  left: 20px;
  border-radius: 50%;
  border: 8px solid #000;
  border-color: #1d3f72 transparent #1d3f72 transparent;
  -webkit-animation: lds-double-ring 2.6s linear infinite;
  animation: lds-double-ring 2.6s linear infinite;
}
.lds-double-ring div:nth-child(2) {
  width: 140px;
  height: 140px;
  top: 30px;
  left: 30px;
  border-color: transparent #5699d2 transparent #5699d2;
  -webkit-animation: lds-double-ring_reverse 2.6s linear infinite;
  animation: lds-double-ring_reverse 2.6s linear infinite;
}
.lds-double-ring {
  width: 200px !important;
  height: 200px !important;
  -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
  transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
}

    
    </style>
         
<div class="center">
    <div class="dextra-d">
    <div class="lds-double-ring loader-align">
        <div></div>
        <div></div>
    </div>
        </div>
 <span class="text-loader">Cargando entrevista...</span>   
</div>     
        </body>
</html>

<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<?!= include('LoadBar'); ?>
<script>
if (<?= close ?> == "close"){
google.script.host.close();
}
</script>
</body>
</html>

Is the path correct? Have you checked it in the document inspector? — isherwood, Oct 25 '18 at 15:39
Yes it is, also checked in document inspector I get this error failed to load resource: "link to my css file" the server responded with a status of 400 (), but all the other elements of the CSS work just fine — Yair Hernandez, Oct 25 '18 at 15:58

Cooper · Accepted Answer · 2018-10-31T19:55:02.433

try this:

<script>
window.onload=function(){
    google.script.run
    .withSuccessHandler(function(url){
       var s='<style type="text/css"> .myimage{ background-image:url("' + url + '");background-repeat:no-repeat;background-position:center;width:100%;height:100px;} </style>';
       $(s).appendTo("head");
       console.log('URI:\n%s\n',url);//I needed this to debug it because I left the last parenthesis off at first.
    })
    .convImageUrl();
  };
</script>

I got most of this from Curt

And this is the function in Code.gs:

function convImageUrl(url){//need to add a default logo here
  var url=url || "some default image url";
  var blob=UrlFetchApp.fetch(url).getBlob();
  var b64Url='data:' + blob.getContentType() + ';base64,' + Utilities.base64Encode(blob.getBytes());
  return b64Url;
}

I got most of the convImageUrl() from Tanaike

It's a way to get the entire image embedded within the url. You could store it within the app as a string. You can put it into your css background-image:url("b64Url-string")

I was playing around with this recently and here's a way to store the images in files. I had to do this because there is a 50,000 character limit for cells in sheets. The function checks to see if they already exist and if they do it just returns the data for the store file.

function saveImageUrlInFile(imagename,content) {
  if(imagename) {
    var filename=imagename.slice(0,imagename.indexOf('.'));
    var folder=DriveApp.getFolderById('FolderId');
    var files=folder.getFilesByName(filename)
    var n=0;
    var file;
    while(files.hasNext()) {
      file=files.next();
      n++;
    }
    if(n==0){
      var f=folder.createFile(filename,content,MimeType.PLAIN_TEXT);
      return {name:f.getName(),id:f.getId()};
    }else{
      return {name:file.getName(),id:file.getId()};
    }
  }
}

score -2 · Answer 2 · edited Oct 25 '18 at 18:20

-2

Try to put " " on the image url.

background-image: url("d_icon.png");

edited Oct 25 '18 at 18:20

Rajdeep Singh

17,621
6
53
78

answered Oct 25 '18 at 15:56

Benjamin Beth

1
1

1

Not a factor. I haven't used quotes in that syntax for many years. – isherwood Oct 25 '18 at 15:59
I tried that and doesn´t work. I actually also tried to upload mi image to imgur and put the link in " background-image: url(link to imgur); " but it doesnt work either – Yair Hernandez Oct 25 '18 at 16:01
Do you need to use the img on that way, i mean using background ? Theres another way, just using a box , with a dinamic size. And put ur img inside using the img tag – Benjamin Beth Oct 26 '18 at 08:18

CSS image does not show (Google AppScript)

2 Answers2