Using Vite::asset() for images with vue components and blade

This has been a very frustrating experience.

https://laravel.com/docs/9.x/vite#blade-processing-static-assets

This seems straightforward enough. However, I'm finding a number of issues.

1 - I'd like to use the Vite::asset() helper and pass that value to my vue component I think as a prop.

// blade.php
<hero unskinned-container="{{ \Illuminate\Support\Facades\Vite::asset('resources/images/unskinned_shipping_container.jpg') }}">
</hero>

I'm aware that we can put this in the config/app.php aliases array but Vite::asset() still is not found. So I put the full path in the blade file.

In the vue component I'm not really sure how to go about this. Is it a slot? Kind of at a loss when it's an <img>.

//vue.component
<template>
....
<img src="unskinnedContainer" class="w-3/4 rounded p-4 mx-auto d-block">
...
</template> 

<script>
export default {
    name: "Hero.vue",
    props: ['unskinnedContainer'],
...
</script>

When I run npm run dev the image source only says unskinnedContainer not the asset path from Vite::asset()

2 - when I run npm run build the assets are not found and versioned.

//App Directory Tree
...
public
resources
    fonts
    images
    js
        app.js
   etc.

Now this batch of code should fix that. However, it doesn't in the app.js.

import.meta.glob([
  '../images/**',
  '../fonts/**',
]);

Not sure if we are supposed to have more .. or less. Are we to return the meta.glob in createApp().

LaryAI

3 years ago

Level 58

The issue here is that you are not correctly referencing the asset path in your Vue component. You need to use the require function to reference the asset path.

In your blade file, you can use the Vite::asset() helper to get the asset path and pass it to your Vue component as a prop.

// blade.php
<hero unskinned-container="{{ \Illuminate\Support\Facades\Vite::asset('resources/images/unskinned_shipping_container.jpg') }}">
</hero>

In your Vue component, you can use the require function to reference the asset path.

//vue.component
<template>
....
<img :src="require(unskinnedContainer)" class="w-3/4 rounded p-4 mx-auto d-block">
...
</template> 

<script>
export default {
    name: "Hero.vue",
    props: ['unskinnedContainer'],
...
</script>

For the second issue, you need to use the import.meta.glob function to reference the asset paths in your app.js file.

import.meta.glob([
'../images/**/*',
'../fonts/**/*',
]);

The import.meta.glob function should be returned in the createApp() function.

Hope this helps!

trevorpan

3 years ago

Level 15

@LaryAI :src="require(unskinnedContainer)" gave an error Uncaught ReferenceError: require is not defined

So I removed the require like so: :src="unskinnedContainer"

And that returned the full path as shown here: <img src="https://bidbird.test:5175/resources/images/unskinned_shipping_container.jpg" class="w-3/4 rounded p-4 mx-auto d-block">

However, it still does not load on the screen.

trevorpan

3 years ago

Level 15

I discovered that when copying/pasting/deleting images from phpstorm that they lost their data. Meaning the images turned out to have 0 kb. So, I retrieved the full images from a prior commit and they are displaying as they should using npm run dev.

Please or to participate in this conversation.