vue.js中的空白背景图像

wlsrxk51  于 2023-11-21  发布在  Vue.js
关注(0)|答案(1)|浏览(162)

对于一个网站,我希望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>

字符串
以下是网站的外观:

vvppvyoh

vvppvyoh1#

将图像导入模块,然后将其绑定到样式背景:

<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>

字符串

相关问题