頁面重新加載時如何更改背景圖像？

Question

好吧，我正在嘗試創建一個具有不同背景的頁面，這就是我到目前為止所做的。

export default {
  name: 'app',
  components: {
    NavBar
  },
  data(){
    return{
      images:[
        {img: '"./assets/img1.jpg"'},
        {img: '"./assets/img2.jpg"'},
        {img: '"./assets/img3.jpg"'},
        {img: '"./assets/img4.jpg"'},
        {img: '"./assets/img5.jpg"'},
        {img: '"./assets/img6.jpg"'},
      ]
    }
  },
  methods:{
    changeBackgroundImage() {

      var item = this.images[Math.floor(Math.random() * this.images.length)].img 
      //test 1:
      // document.body.style.backgroundImage = "url(" + item + ")"

      //test 2:
      document.body.style.backgroundImage = "url('./assets/img6.jpg')";

      //test 3:
      // document.body.style.background= 'red'    

    },
  },
  created: function(){
    this.changeBackgroundImage()
  },   
}

所以，我在數組上得到一個隨機項目，然后我把他放在背景圖像上（測試 1）？ 但這不起作用，所以對於測試，我嘗試直接放置路徑（測試 2），仍然無法正常工作，沒有錯誤或消息，只是......不會發生。 所以我嘗試了另一個樣式命令（測試 3），只是為了確保它正常工作，是的，正常工作，讓一切都變紅。

當我在網絡上 go 時，那里有一個 img，但她是全白的，不是一個選擇。

那么，為什么 javascript 會忽略我的背景圖片？

https://github.com/RamonRemo/Projeto1-LembreSee-Front

Answer 1

您的圖片網址是單引號和雙引號。 這意味着您同時使用'和"來表示它是一個字符串。

使用單引號

'./assets/img1.jpg'

或雙引號。

"./assets/img1.jpg"

通過這樣做document.body.style.backgroundImage = "url(" + item + ")"應該可以工作。

Answer 2

您在第一次測試中缺少一組引號，請嘗試如下：

document.body.style.backgroundImage = "url('" + item + "')";