當圖像文件名用作變量時，.style.backgroundImage="url('my_image.png') 不起作用

Question

這是一個 function，當我將背景文件名作為括號字符串提供時，它可以完美運行。（即“my _image.png”）

function  mychoice_photo_show() {
  document.getElementById('mychoice_photo').style.backgroundImage="url('my _image.png')"
}

這是問題所在：-

function mychoice_photo_show(img) {
  document.getElementById('mychoice_photo').style.backgroundImage="url(img)"
};

當我這樣稱呼它時： mychoice_photo_show("my_image.png")

它不會調用請求的圖像。

我應該在某處尋找任何語法，例如缺少單引號或雙引號，還是它不應該那樣工作？

Answer 1

試試這樣。

function mychoice_photo_show(img) {
  document.getElementById('mychoice_photo').style.backgroundImage="url('" + img + "')"
};

或者 ES6

function mychoice_photo_show(img) {
      document.getElementById('mychoice_photo').style.backgroundImage=`url('${img}')`
    };

例如

 function mychoice_photo_show(img) { document.getElementById('mychoice_photo').style.backgroundImage="url('" + img + "')" };

 #mychoice_photo{ width:100px; height:100px; }

 <div id="mychoice_photo"></div> <button onclick="mychoice_photo_show('https://www.w3schools.com/howto/img_nature_wide.jpg')">Show image</button>

 function mychoice_photo_show(img) { document.getElementById('mychoice_photo').style.backgroundImage=`url('${img}')` };

 #mychoice_photo{ width:100px; height:100px; }

 <div id="mychoice_photo"></div> <button onclick="mychoice_photo_show('https://www.w3schools.com/howto/img_nature_wide.jpg')">Show image</button>

Answer 2

我將創建一個實用程序 function 獲取元素和圖像 URL 並使用模板文字設置background-image 。 然后，我將創建一個方便調用來查找您的元素並將該信息傳遞給實用程序 function。

注意：我將您的 function 的名稱轉換為 lowerCamelCase 而不是 lower_snake_case 因為 JavaScript 推薦了這個。

function showPhoto(element, imageUrl) {
  element.style.backgroundImage = `url("${imageUrl}")`;
}

function mychoicePhotoShow(imageUrl) {
  showPhoto(document.getElementById('mychoice_photo'), imageUrl);
}

模板文字已經有很長一段時間了：

瀏覽器	最低版本
鉻合金	41
邊緣	12
Firefox	34
Safari	9

Answer 3

如果 es6 可用，試試這個：

function mychoice_photo_show(img) {
  document.getElementById('mychoice_photo').style.backgroundImage=`url('${img}')`
};

或者如果 es6 不可用，則：

function mychoice_photo_show(img) {
  document.getElementById('mychoice_photo').style.backgroundImage="url('" + img + "')"
};