提问人：Clyon97 提问时间：10/31/2023 最后编辑：Boussadjra BrahimClyon97 更新时间：10/31/2023 访问量：33
vue.js 中的空白背景图像
Blank background-image in vue.js
问：
对于一个网站，我希望页面的 70% 被图像覆盖。但是，图像只是空白的。 我使用 Vue.js 作为我的前端。下面是导致空格的代码：
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
</script>
<template>
<div style="background-image: `url(${require('../assets/bg.png')})`;
height: 70vh" class="full-width-image">
</div>
<div class="container">
<div class="row">
<div class="col">
</div>
</div>
<div class="row">
<div class="col">
<h1>Test</h1>
<p>test test test!</p>
</div>
</div>
</div>
</template> -
<style>
.full-width-image {
margin: auto;
padding: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
</style>
以下是该网站的样子：
答：
1赞
Boussadjra Brahim
10/31/2023
#1
将图像导入为模块，然后将其绑定到样式背景：
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import bg from '../assets/bg.png'
</script>
<template>
<div :style="{'background-image': url(bg), height: '70vh'}" class="full-width-image">
</di
...
</div>
</template>
评论