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>