Vue 3-图像相对路径语法(方法内部)

Question

我目前正在构建一个带有图像回退的小组件，它应该这样实现：

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"
}
}
}

当所有失败时，channelLogo应该从assets文件夹加载，这一切都很好，除了URL没有重新定义。

徽标的html是：

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

并渲染：

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

在同一个组件中，我使用此图像作为div背景：

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

那么，语法是如何从一个方法中返回这些相对路径的呢？

Answer 1

就像Vucko提到的那样，需要将路径包装成必需的。但使用时不起作用

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

我不得不使用：

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

作为一种替代方案，我首先导入媒体，然后使用它：

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