Level 6
Hi @n212 providing the images folder is inside of your public folder, you can call your images like this:
{{ asset('images/diensten/pakketten/question-circle.svg') }}
Sep 6, 2022
6
Level 2
Vite cannot find images on build
Hello, I currently have a Laravel application with Vite, and I have been developing this with Vue. 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
Image import in Vue file (list.vue)
<template>
<img class="more-information" src="/images/diensten/pakketten/question-circle.svg" alt="question" />
</template>
....
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 (which it shouldn't). Thanks for any help in advance.
Level 2
@ollie_123 Thank you for your suggestion. Unfortunately this is in a .vue file and blade cannot be used inside.
Level 6
@n212 sorry, i completely missed that it was a vue file. doh... My vue knowledge is pretty weak tbh as i've not played with it much.
Are you getting a 404 error on the images?
Have you imported the image at the top of the component & tried calling it like this:-
src="@/images/diensten/pakketten/question-circle.svg"
Level 2
I've managed to find a solution for this problem. The issue was because Vite was looking for the path of 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()],
}),
],
});
8 likes
Level 1
For anyone working through this issue, here is the documentation with good comments on why the base and includeAbsolute params are needed in the Vite Vue config.
https://laravel.com/docs/10.x/vite
transformAssetUrls: {
// The Vue plugin will re-write asset URLs, when referenced
// in Single File Components, to point to the Laravel web
// server. Setting this to `null` allows the Laravel plugin
// to instead re-write asset URLs to point to the Vite
// server instead.
base: null,
// The Vue plugin will parse absolute URLs and treat them
// as absolute paths to files on disk. Setting this to
// `false` will leave absolute URLs un-touched so they can
// reference assets in the public directory as expected.
includeAbsolute: false,
},
Level 6
For projects running on Vue 2, you need to change the vue config as below
vue({
template: {
transformAssetUrlsOptions: {
base: null,
includeAbsolute: false,
},
},
}),
transformAssetUrlsOptions should be used instead of transformAssetUrls.
Please or to participate in this conversation.