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?

Did you try to remove the `url` variable and include the string directly as 1st parameter of the `URL` constructor as described in the [documentation](https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url) ? — Michal Levý, Nov 22 '21 at 11:54
Thanks @MichalLevý but same error also removing the variable and using `"../images/news/"+post.cover` as first param. — Uncoke, Nov 22 '21 at 12:25
@MichalLevý I have done some tests with no results. I have moved the images into the `/public` folder as the documentation suggests. The local host is working. But production gets the same error. I noticed the build creates a new folder (the images folder) int `/dist` and I moved it to production. Why do I continue getting the same error?! — Uncoke, Nov 29 '21 at 12:40
@Shaci I fix it using a different approach: images saved into `public/images` folder and then I used a dynamic path as `:src="'path/'+data_img"` — Uncoke, Jan 27 '22 at 06:12

score 2 · Answer 1 · answered Mar 14 '22 at 22:08

2

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;

answered Mar 14 '22 at 22:08

Tirinoarim

624
7
14

score 0 · Answer 2 · answered Jul 14 '22 at 04:02

This is because your build.target doesn't not support import.meta.url. If you were to log import.meta.url to the console, it would be undefined, that's why it spits out an error of Invalid URL.

I indeed answered this in another question, please take a look: https://stackoverflow.com/a/72975011/14269322

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

2 Answers2