在template、data、style中引入图片问题 + 在template中动态引入图片

用的是webpack构建

1. 在template中引入图片

<!-- 情况一： -->
<!-- 无法正常的找到图片 -->
<div class="" style="
              position: absolute;top: 0;bottom: 0;right: 7%;left: 80%;
              background: url('../../assets/img/qrCode.png') no-repeat;
              ">
</div>
  
<!-- 情况二： -->
<!-- 可以找到图片 -->
<div class="" :style="{ background: `url(${require('@/assets/img/qrCode.png')})` }">
</div>
  
<!-- 情况三： -->
<!-- 可以找到图片 -->
<div class="" :style="{ background: `url(${require('../../assets/img/qrCode.png')})` }">
</div> 

<!-- 情况四： -->
<!-- 可以找到图片 -->
<img style="width: 100%;height: 100%;" src="../../assets/img/qrCode.png" alt="">

<!-- 情况五： -->
<!-- 可以找到图片 -->
<img style="width: 100%;height: 100%;" src="@/assets/img/qrCode.png" alt="">

2. 在style中引入图片

/* 情况一： */
/* 可以找到图片 */
<style lang="scss" scoped>
.Title {
  position: relative;
  background: url('../../assets/img/qrCode.png') no-repeat;
}
</style>

/* 情况二： */
/* 可以找到图片 */
<style lang="scss" scoped>
.Title {
  position: relative;
  background: url('@/assets/img/qrCode.png') no-repeat;
}
</style>

3. 在data中引入图片

<template>
    <img style="width: 100%;height: 100%;" :src="imgUrl" alt="">
</template>

<script setup>
// 情况一：无法加载图片
const imgUrl = '../../assets/img/qrCode.png'

// 情况二：可以加载图片
const imgUrl = require('../../assets/img/qrCode.png')

</script> 

总结：在data中引入资源文件，都需要通过webpack提供的require函数来实现

4. 在template中动态引入图片

/* 情况一： */
/* 无法找到图片 */
<img style="width: 100%;height: 100%;" :src="true? '../../assets/img/qrCode.png': ''" alt="">

/* 情况二： */
/* 可以找到图片 */
<img style="width: 100%;height: 100%;" :src="true? require('../../assets/img/qrCode.png'): ''" alt="">

总结：在template中动态引入图片，需要通过require函数来实现