Vue uses the img tag: the method of dynamically introducing the resource path by the src attribute

Vue version number: 3.2.13

 The <img src="" /> tag in vue statically imports image resources

<template>
  <!-- <router-view/> -->

  <!-- 静态引入图片资源 -->
  <img src="./assets/logo.png" alt="">
</template>

<style lang="scss">

</style>

operation result:

 The wrong way to dynamically introduce image resources in the <img src="" /> tag in Vue:

<template>
  <!-- <router-view/> -->

  <!-- 静态引入图片资源 -->
  <!-- <img src="./assets/logo.png" alt=""> -->

  <!-- 动态引入图片资源-->
  <img :src="urls" >
</template>

<script setup>
// 动态引入图片资源的错误方法
const urls = "./assets/logo.png";

</script>

<style lang="scss">

</style>

Running result: the picture cannot be displayed normally

 The correct way to dynamically import image resources in the <img src="" /> tag in vue (by require):

<template>
  <!-- <router-view/> -->

  <!-- 静态引入图片资源 -->
  <!-- <img src="./assets/logo.png" alt=""> -->

  <!-- 动态引入图片资源-->
  <img :src="urls" >
</template>

<script setup>
// 动态引入图片资源的错误方法
// const urls = "./assets/logo.png";
// 动态引入图片资源的正确方法
const urls = require("./assets/logo.png");

</script>

<style lang="scss">

</style>