如何在Vue.js中绑定背景图像

对于 v-bind:style 的值只是一个基于某些规则进行内容绑定的普通JavaScript对象。背景图像的值应该是一个字符串。因此，我们可以使用style标签在Vue.js中应用或数据绑定背景图像，然后在其中定义背景图像的URL。它将自动从字符串中提取URL，然后在浏览器网页中显示相同的数据内容。

要访问背景图像，请创建一个DIV元素，并在其中用URL定义背景图像。URL将从JS文件中提取。

示例

将以下代码片段复制并粘贴到您的Vue项目中，并运行Vue项目。您将在浏览器窗口中看到以下输出。

文件名 – app.js
目录结构 — $ project/public — app.js

// Defining image link
new Vue({
   el: "#app",
   data: {
      image:"https://store-images.s-microsoft.com/image/apps.2366.9007199266518672.0607cbef-4e96-49c1-b02c-2432d9fc4826.e2043c6d-d6c4-49ed-8199-cc06665e9e9f"
   }
})

文件名 – index.html
目录结构 — $ project/public — index.html

<!DOCTYPE html>
<html>
<head>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <link rel="stylesheet" type="text/css" href="styles.css">
</head>
   <body>
      <div id="app">
         <div class="circular"
            :style="{ backgroundImage: 'url(' + image + ')' }">
         </div>   
      </div>
      <script src='app.js'></script>
   </body>
</html>

文件名 – styles.css
目录结构 – $ project/public – styles.css

.circular{
  width: 200px;
  height: 200px;
  background-size: cover;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px; 
}

运行以下命令以获得下面的输出结果 −

C://my-project/ > npm run serve

完整的代码

现在我们来创建一个完整的程序，使用上述三个文件- app.js，index.html和styles.css。我们可以将这段代码作为一个HTML程序运行。

<!DOCTYPE html>
<html>
<head>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <style>
      .circular {
         width: 200px;
         height: 200px;
         background-size: cover;
         border-radius: 50px;
         -webkit-border-radius: 50px;
         -moz-border-radius: 50px;
      }
   </style>
</head>
   <body>
      <div id="app">
         <div class="circular" :style="{ backgroundImage: 'url(' + image + ')' }">  </div>
      </div>
      <script>

         // Defining image link
         new Vue({
            el: "#app",
            data: {image: "https://store-images.s-microsoft.com/image/apps.2366.9007199266518672.0607cbef-4e96-49c1-b02c-2432d9fc4826.e2043c6d-d6c4-49ed-8199-cc06665e9e9f" }
         })
      </script>
   </body>
</html>

在这篇文章中，我们演示了如何在Vue.js中绑定背景图片。为了完成这个任务，我们创建了app.js、index.html和styles.css文件，并使用`