Vite unable to find images when running build command

n212 0
Viewed 21

I currently have a Laravel application with Vite, and I have been developing this with Vue and Inertia.js. I've used images in my application, which has worked fine so far using the development environment with npm run dev. No error there.

But once I run npm run build Vite is unable to find the images provided I used in my Vue files giving me the following error:

Error

[vite]: Rollup failed to resolve import "/images/diensten/pakketten/question-circle.svg" from "resources/views/pages/diensten/list.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`

I am certain that the path provided is correct, which works fine during npm run dev. An example of the file I am using:

Image import in Vue file (list.vue)

<template>
<img class="more-information" src="/images/diensten/pakketten/question-circle.svg" alt="question" />
</template>
.... // Further Vue script files etc.

Vite.config.ts

import { defineConfig } from 'vite'
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
import laravel from 'vite-plugin-laravel'
import vue from '@vitejs/plugin-vue'
import inertia from './resources/scripts/vite/inertia-layout'

export default defineConfig({
    plugins: [
        inertia(),
        vue(),
        laravel({
            
            postcss: [
                tailwindcss(),
                autoprefixer(),
            ],
        }),
    ],
})

Running the same build command on my local machine gives me the same results, unfortunately. Is this a configuration error in my Vite config? I assume it has to do with Vite trying to find the image file, but unable to find it when building (which it shouldn't, since these images a grabbed via the web into my public folder). Thanks for any help in advance.

vite laravel
1 Answers

I've managed to find a solution for this problem. The issue was because Vite was looking for the path of the absolute path for the images, which it shouldn't when compiling.

This code with Vue is needed below to ignore these image absolutes. It should work fine after.

vite.config.js

import { defineConfig } from "vite";
import tailwindcss from "tailwindcss";
import autoprefixer from "autoprefixer";
import laravel from "vite-plugin-laravel";
import vue from "@vitejs/plugin-vue";
import inertia from "./resources/scripts/vite/inertia-layout";

export default defineConfig({
    plugins: [
        inertia(),
        vue({
            // This is needed, or else Vite will try to find image paths (which it wont be able to find because this will be called on the web, not directly)
            // For example <img src="/images/logo.png"> will not work without the code below
            template: {
                transformAssetUrls: {
                    includeAbsolute: false,
                },
            },
        }),
        laravel({
            postcss: [tailwindcss(), autoprefixer()],
        }),
    ],
});
n2120
Related