I’m trying to show the images called from the public and src/assets folders of a vue.js in a wordpress plugin.

here’s the template file:

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
  <ComponentDev/>
</template>

I tried this from vite documention but this could not bring me a solution.

export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
  if (command === "serve") {
    return {
      // dev specific config
      plugins: [
        vue()
      ],
      resolve: {
        alias: {
          "@": fileURLToPath(new URL("./src", import.meta.url)),
        }
      },
      base: "wordpress/wp-content/plugins/vuePoet/"
    };
  } else {
    // command === 'build'
    return {
      // build specific config
    };
  }
});