How fix in Vue3 Vite I got missing dynamic images in production?

Question

I’m moving to Vue3 and Vite and I’m getting some trouble with the build version, where some images are missing.

These missing images are dynamic ones, which are loaded in this way:

A JSON data is imported with posts; The template has an image having a dynamic src calling a method that returns the path/url The code Template:

<img :src=“cover(post)”>

The method:

 cover(post){
  const url = "../images/news/"+post.cover;    
  const imgUrl = new URL(url, import.meta.url).href;
  return imgUrl;
}

Code three is like this:

root -
   - dist/
          - assets (it includes JS, CSS and images with a replaced filename)
          - index.html
   - public
   - data / with JSON
   - src -
         - CSS
         - images/news/covers
         - pages  / it includes my current page
         - components / it includes my current template
         - APP.vue
         - router.js

The Vite config is

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [
      {
        find: /^~.+/,
        replacement: (val) => {
          return val.replace(/^~/, "");
        },
      },
      {
        find: 'tailwind.config.js',
        replacement: () => './src/css/tailwind.config.js',
      }
    ],
  },
  optimizeDeps: {
    include: [
      'tailwind.config.js',
    ]
  }
})

The error:

The code works as well on dev (localhost:3000), but production after the built show the error:

vendor.c138f1ef.js:1 TypeError: Failed to construct ‘URL’: Invalid URL at Proxy.cover (index.11439723.js:1)

Any suggestion to fix it?

Answer 1

According to the docs, I think it only supports strings or template strings (not variables). Try this instead...

  const imgUrl = new URL(`../images/news/${post.cover}`, import.meta.url).href;