使用从 JSON 数据中提取的 URL 在 HTML 中设置 backgroundImage

Question

 var ourRequest = new XMLHttpRequest(); ourRequest.open('GET', 'https://spreadsheets.google.com/feeds/cells/1PzTMW6xH5cjLgvLn_LOq25XEbmrCw2MP9C9vvt4rhoM/1/public/full?alt=json') ourRequest.onload = function() { var ourData = JSON.parse(ourRequest.responseText); var TEXT = ourData.feed.entry[2].gs$cell.inputValue; var IMG = ourData.feed.entry[3].gs$cell.inputValue; console.log(TEXT); console.log(IMG); document.getElementById('testoutput').innerHTML = TEXT; document.getElementById('backgroundIMG').style.backgroundImage = "url('IMG')"; }; ourRequest.send();

 html, body { height: 100%; margin: 0; overflow: hidden; /* Hide scrollbars */ } div { text-align: left; min-height: 100%; font-family: motiva-sans, sans-serif; font-weight: 800; font-size: 15vw; padding: 15px; padding-top: 30px; padding-left: 10%; }

 <html lang="en"> <head> <link rel="stylesheet" href="https://use.typekit.net/vbl6jef.css"> <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet"> <meta charset="utf-8"> <title>Google Sheets - Werkend</title> </head> <body> <div id="backgroundIMG"><div> <div id="testoutput"></div> </body> </html>

I'm working on a HTML document that gets its styling from Google Sheets JSON data.我正在处理从 Google Sheets JSON 数据中获取样式的 HTML 文档。 So far it works for setting properties such as backgroundColor.到目前为止，它适用于设置 backgroundColor 等属性。

Right now i'm trying to set the backgroundImage and have set a variable that contains the url: document.getElementById('backgroundIMG').style.backgroundImage = "url('IMG')";现在我正在尝试设置 backgroundImage 并设置一个包含 url 的变量： document.getElementById('backgroundIMG').style.backgroundImage = "url('IMG')";

When I console.log the variable it returns the url just fine.当我 console.log 变量返回 url 就好了。 When I place the URL directly into the code above, it works.当我将 URL 直接放入上面的代码时，它可以工作。 When I put the variable in the code (like shown above) it won't load the URL.当我将变量放入代码中时（如上所示），它不会加载 URL。

My limited knowledge stops me from searching the right terms on what is going on here.我有限的知识使我无法搜索有关这里发生的事情的正确术语。 I have tried reading up on variables but no succes yet.我曾尝试阅读变量，但还没有成功。

Can anyone point me in the right direction by either telling me what to read up on or by offering a sollution based on my code below?任何人都可以通过告诉我要阅读的内容或根据我下面的代码提供解决方案来指出我正确的方向吗？

Answer 1

It's not using the IMG variable, just IMG as a string, so try:它不使用 IMG 变量，只使用 IMG 作为字符串，因此请尝试：

document.getElementById('backgroundIMG').style.backgroundImage = "url(" + IMG + ")";

Adding a variable to a string:向字符串添加变量：

"Traditional" ways (plus sign is expands a string): “传统”方式（加号是扩展字符串）：

let s = "number: " + num;

let s = 'number: ' + num;

ES6 template literals: ES6 模板字面量：

let s = `number: ${num}`

Get more information on these links:获取有关这些链接的更多信息：

JS Strings JS 字符串

Template literals 模板文字

使用从 JSON 数据中提取的 URL 在 HTML 中设置 backgroundImage

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-02-26 08:27:34

使用从 JSON 数据中提取的 URL 在 HTML 中设置 backgroundImage

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-02-26 08:27:34

解决方案1
1 已采纳 2020-02-26 08:27:34