vue使用img标签:src属性动态引入资源路径的方法

vue版本号：3.2.13

 vue中<img src="" />标签静态引入图片资源

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

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

<style lang="scss">

</style>

运行结果：

 vue中<img src="" />标签动态引入图片资源的错误方法：

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

运行结果：图片无法正常显示

 vue中<img src="" />标签动态引入图片资源的正确方法（通过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>