Question

我实现了一个加载栏，该加载栏显示了我的脚本在Google表格中的后台运行时，CSS中使用的几乎所有元素实际上都可以正常工作，唯一不起作用的是图像应该位于加载栏的中心。

我在CSS with Google App Script处发现了如何在Google Appscript中实际实现CSS的方法。但是每当我使用 background-image：url（myimage.png）; 时，加载栏中都没有显示图像。

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>

Answer 1

尝试一下：

<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>

我从Curt

中获得了大部分收益

这是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;
}

我从Tanaike获得了大部分convImageUrl（）

这是一种将整个图像嵌入到url中的方法。您可以将其作为字符串存储在应用程序中。您可以将其放入CSS background-image：url（“ b64Url-string”）

我最近正在玩这个游戏，这是一种将图像存储在文件中的方法。我必须这样做，因为表格中的单元格限制为50,000个字符。该函数检查它们是否已经存在，是否已经存在，只是返回存储文件的数据。

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

Answer 2

我认为你的道路是错误的。我认为它可能位于此路径的../assets/images/中。

Answer 3

尝试在图片网址上添加“”。

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

CSS图片未显示（Google AppScript）

3 个答案: