Vue 3 - Image relative path syntax (inside method)

Question

I'm currently build a little component with an image fallback, it should be implemented like this:

export default {
 name: "ChannelHeader",
 props: ['channel'],
 methods : {
 channelLogo(channel) {
 if(channel?.thumbnails?.high) return channel.thumbnails.high
 if(channel?.thumbnails?.medium) return channel.thumbnails.medium
 if(channel?.thumbnails?.default) return channel.thumbnails.default
 return "~@/assets/material_header_medium.jpg"
 }
 }
}

when all fails the channelLogo should been loaded from assets folder this works all fine beside that the URL is not redered.

the html for the logo is:

 <img uk-cover :src="channelLogo()" :alt="channel?.title+' Logo'">

And rendered:

<img uk-cover="" src="~@/assets/material_header_medium.jpg" alt="undefined Logo" data-v-5d87ed20="" class="uk-cover" style="height: 70px; width: 70px;">

In the same component i use this image as div background:

.channel-header{
 background-image: url("~@/assets/material_header_medium.jpg");
 min-height: 300px;
}

So how is the Syntax to give back those relative paths from a method?

• Vucko: You need tu use require() - return require("~@/assets/material_header_medium.jpg")

Answer 1

Like mentioned by Vucko it was needed to wrap the path into a required. but it will not work when using:

return require("~@/assets/material_header_medium.jpg")

i had to use:

return require("@/assets/material_header_medium.jpg")

As an alternative i have first importet the media and used it later:

import fallbackImage from '@/assets/material_header_medium.jpg'
...
return fallbackImage