Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

mathewparet's avatar

Accessing Vite bundled image assets in Inertia/vue

I use inertiajs and I have some images under resources/js/Pages/Device/Assets.

I updated app.js & ssr.js and replaced:

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob([
        './Pages/**/*.vue'
    ])),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
});

with:

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob([
        './Pages/**/*.vue',
        './Pages/**/Assets/**'
    ])),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
});

I can see the build worked and the assets were copied to build directory.

But how do I refer this image in my Vue file?

<span v-for="device in devices.data" :key="device.id">
                        <Link :href="route('devices.edit', {device: device.id})">
                            <img :src="'./Assets/'+device.driver+'.png'">
                        </Link>
                    </span>

The above code doesn't seem to work. I want to able to serve the images versioned both when I am using npm run dev or npm run build .

I am not sure what the right question is to ask here - maybe it is - What is the InertiaJS/Vue alternative to:

Vite::asset("./Assets/something.png");

Or maybe I am packaging it all wrong!

0 likes
6 replies
SteamDiesel's avatar

The application view does not render from the resources directory, only the public directory where the build outputs to. if your build outputs images to an assets directory, then you could manually copy the /assets directory into the /public directory.

I normally skip putting my images in the /resources directory, because it's all going to end up in the /public directory after the npm / vite build process.

So what you're looking for is the folder and location of the image within the public directory, it also means that you are placing your images where they will end up eventually. So if your images are in /public/images/welcome/splash.png then you will want to refer to the image as src="/images/welcome/splash.png"

mathewparet's avatar

That wouldn't version the asset. However, I found a solution that works with versioning.

<script setup>
    import kindleLogo from './Assets/kindle.png';
</script>
<template>
	<img :src="kindleLogo">
</template>

Because I have added the images to assets in app.js and ssr.js these assets are now versioned and Vue makes sure the correct version of the asset is used when I use the above code.

This, however, doesn't fix my problem in full. It fixed the problem of reference the image. But I need to reference it dynamically.

For example, in the above example, I would like the path to the image to be dynamic.

1 like
Sinnbeck's avatar

@mathewparet I fought that for half a day and ended up just importing all needed images and making a map (for me it was 3 possible images)

I'm curious if you get it working. You will most likely need to do the dynamic import inside of the file, and remove it from the app.js

jagdish-j-ptl's avatar

You can use it by creating function like

function getImageUrl(name) {
    return new URL(`/resources/images/${name}`, import.meta.url).href
}

and then use it like

const logo = getImageUrl("logo.png");
1 like

Please or to participate in this conversation.