In a Vue 3 project, I am trying to implement an image thumbnail in the head section.
I have tried different ways:
<meta name="thumbnail" content="<%= BASE_URL %>assets/images/image.webp" />
and
<meta name="thumbnail" content="@/assets/images/image.webp" />
When I view the page code after building, that same image when referenced in a Vue component in an <img> tag looks like my-base-url/img/image.74adcb8b.webp.
But the link in the head section looks like content="/my-base-url/assets/images/image.webp" or like content="@/assets/images/image.webp" which are both invalid URLs.
If I try to open these URLs, I get
[Vue Router warn]: No match found for location with path "/my-base-url/assets/images/image.webp"
I have also tried dynamically injecting the element in the head section from my component:
beforeCreate() {
// Add thumbnail image to head section
let thumb = document.createElement('META')
thumb.setAttribute('name', 'thumbnail')
thumb.setAttribute('content', '@/assets/images/image.webp')
document.querySelector(`head`).appendChild(thumb)
}
But the outcome is exaclty the same.
How am I supposed to create a valid link to an image in the head section?