Vue-meta: [QUESTION] How to load webpacked images in assets folder in vue meta?
Hi,
how do i load my images in /assets folder with vue-meta?
{ hid: 'og:image', name: 'og:image', content: require('~/assets/img/home/bri-booklet.jpg') },
doesn't seem to work. Any help?
dysol
All 6 comments
You don't need to load images in meta tags, bud
All you need is url path.
ChrisRobston
on 12 Jul 2018
@canyoudev i meant webpacked images. Not static images where i can just state the /path/to/img
dysol
on 13 Jul 2018
Hi @dysol,
In the script tag, you could
import ogImage from "./assets/img/home/bri-booklet.jpg"
and then use it as below
{ hid: 'og:image', name: 'og:image', content: "https://your.domain" + ogImage}
oahccc
on 26 Aug 2018
try again using functions and return your require('~/assets/img/home/bri-booklet.jpg')
ghost
on 13 Dec 2018
Sorry, what I have said above didn't work... I've tried using base64 image, but I'm still looking for better approaches.
ghost
on 14 Dec 2018
Just tried with one of the examples and @oahccc solution seems to work just fine (with file-loader configured in the webpack config for image files). That might very well be due to webpack updates since this issue was originally posted, but closing it for now. Please reopen or create a new issue with a reproduction if a problem still exists
pimlie
on 23 Apr 2019
Related issues
hvalcourtSerdy
路
3Comments
derz
路
3Comments
vishr
路
5Comments
o-alexandrov
路
5Comments
terazus
路
8Comments
Most helpful comment
Hi @dysol,
In the script tag, you could
import ogImage from "./assets/img/home/bri-booklet.jpg"and then use it as below
{ hid: 'og:image', name: 'og:image', content: "https://your.domain" + ogImage}