带有 Vue 的背景图片答案

【问题标题】：Background image with Vue带有 Vue 的背景图片
【发布时间】：2020-11-17 11:17:07
【问题描述】：

我想在我的 Vue 项目的 App.vue 文件中添加背景图片。

我在资产文件夹中使用名为“leaves.jpg”的文件进行了尝试，但结果为空白。

<template>
<div :style="{'background-image':'url(./assets/leaves.jpg)'}">
</div>

</template>

<script>
export default {
  data () {
    return {
    }
  }
}
</script>

<style>

</style>

【问题讨论】：

标签： vue.js background

【解决方案1】：

尝试为div添加高度和宽度。

<div :style="{'background-image':'url(./assets/leaves.jpg)'}" 
      style="width=100px; height="100px"
/>

假设您的资产文件夹路径正确

【讨论】：

【解决方案2】：

尝试在样式标签中添加背景图片，如下所示。

<style>
div {
  background-image: url('custom1.png')
}
</style>

【讨论】：

【解决方案3】：

你需要它：

:style="{'background-image': `url(${require('@/assets/leaves.jpg')})`}"

【讨论】：