uniapp 引入背景图片 background-image

在UniApp中，引入背景图片通常使用CSS样式来设置`background-image`属性。这个属性允许你在元素的背景上应用一个图像，可能是从本地资源、网络请求或者是图片URL。

例如，在.vue文件中，你可以这样做：

<template>
  <view class="container">
    <image :src="bgImageUrl" slot="placeholder"></image> <!-- 使用占位符图片展示加载过程 -->
    <div class="bg-img-container">
      <view class="bg-img" :style="{ backgroundImage: 'url(' + bgImageUrl + ')' }"></view>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      bgImageUrl: '/assets/bg.jpg', // 这里填写你的图片路径
    };
  },
};
</script>

<style scoped>
.container {
  /* 可以添加其他样式 */
}

.bg-img-container {
  position: relative;
}

.bg-img {
  position: absolute; /* 如果你想让图片完全覆盖容器 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover; /* 设置图片填充背景并保持宽高比 */
}
</style>

在这里，我们首先通过`:src`属性设置了占位图，当背景图片加载完成时会被替换。然后在`.bg-img`元素上动态设置了`background-image`，确保了图片能在页面渲染时正确显示。