Loading Images in Vue 3

4/13/2022

I was trying to load images in Vue3 the same way I had in prior version as well as how Astro works. So it appears that’s not going to work any more.

This was added to vite.config.ts just so the app is not running the in root folder.

  build: {
    rollupOptions: {
      external: [
        "subfolder"
      ],
    },
  },

Using the pulic folder. Works in dev but wont build.

          <img src="/subfolder/images/img_pub.webp" alt="Public Img"&gt;
Public Img

Importing the image does work and it’s the only way

       import imgName from "@/assets/img/img_asset.webp" ;
       <img :src="imgName" alt="SRC Img"&gt;

Related Github for vue3imagelocation

This was the build error that lead me here

vue3imagelocation@0.0.0 build &gt; vue-tsc --noEmit &amp;&amp; vite build<br/>vite v2.9.1 building for production...✓ 9 modules transformed.[vite]: Rollup failed to resolve import "/subfolder/images/img_pub.webp" from "src/components/ShowImages.vue".This is most likely unintended because it can break your application at runtime.If you do want to externalize this module explicitly add it to`build.rollupOptions.external`error during build:Error: [vite]: Rollup failed to resolve import "/subfolder/images/img_pub.webp" from "src/components/ShowImages.vue".This is most likely unintended because it can break your application at runtime.If you do want to externalize this module explicitly add it to`build.rollupOptions.external`&nbsp; &nbsp; at onRollupWarning (D:\GitHub\pubic\vue3imagelocation\node_modules\vite\dist\node\chunks\dep-611778e0.js:39103:19)&nbsp; &nbsp; at onwarn (D:\GitHub\pubic\vue3imagelocation\node_modules\vite\dist\node\chunks\dep-611778e0.js:38919:13)&nbsp; &nbsp; at Object.onwarn (D:\GitHub\pubic\vue3imagelocation\node_modules\rollup\dist\shared\rollup.js:23129:13)&nbsp; &nbsp; at ModuleLoader.handleResolveId (D:\GitHub\pubic\vue3imagelocation\node_modules\rollup\dist\shared\rollup.js:22419:26) &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; at D:\GitHub\pubic\vue3imagelocation\node_modules\rollup\dist\shared\rollup.js:22380:26The terminal process "C:\WINDOWS\System32\WindowsPowerShell\v1.0\powershell.exe -Command npm run build" terminated with exit code: 1.<br/>Terminal will be reused by tasks, press any key to close it.

Projects

Archives