Vue usa a tag img: o método de introduzir dinamicamente o caminho do recurso pelo atributo src

Número da versão do Vue: 3.2.13

 A tag <img src="" /> no vue importa recursos de imagem estaticamente

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

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

<style lang="scss">

</style>

resultado da operação:

 A maneira errada de introduzir recursos de imagem dinamicamente na tag <img src="" /> no 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>

Resultado da execução: a imagem não pode ser exibida normalmente

 A maneira correta de importar recursos de imagem dinamicamente na tag <img src="" /> no Vue (por 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>