在项目中展示图片的时候，需要指定的图片在固定好大小的容器里面展示，一般我使用 <img>和背景图片的这两种方法展示图片，

       但是，使用<img>的时候，往往只能展示固定的图片大小，而使用背景图片的展示，可以让图片根据宽或高等比例拉伸展示，如下：

总结：固定容器大小，图片等比例拉伸展示时，使用背景图片的展示方式

这是vite+vue3代码如下：

<template>
  <div class="picture">
    <img style="width: 200px; height: 300px" :src="`${imageUrl}`"/>

    <div
      class="background-test"
      :style="{
        backgroundImage: 'url(' + `${imageUrl}` + ')'
      }"
    ></div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const imageUrl = new URL('@/assets/404_bg.png', import.meta.url)
</script>
<style scoped lang="scss">
.background-test {
  width: 200px;
  height: 300px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  // background-image: url('@/assets/404_bg.png');
}
</style>

这是webpack+vue3代码如下：（本地图片引入需要require()）

在使用参数为url时，需要require()，才能识别出本地图片，注意：在使用require()的时候，必须提前声明使用引入图片的路径方式，就是必要写路径前缀require("@/...") 或者require("./...")，如果require(变量名字)会直接报错

<template>
  <div class="picture">
    <img style="width: 200px; height: 300px" :src="require(`@/assets/${val}_bg.png`)"/>

    <div
      class="background-test"
      :style="{
        backgroundImage: 'url(' + require(`@/assets/${val}_bg.png`) + ')'
      }"
    ></div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const  val = ref(404)
</script>
<style scoped lang="scss">
.background-test {
  width: 200px;
  height: 300px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  // background-image: url('@/assets/404_bg.png');
}
</style>