I'm trying to add OGP meta tags to my relatively simple Vue.js application. I'm 'hosting' it on GitHub pages, thus it can't be server side rendered, the index.html page served is always static.
I want to add a image meta tag like this:
<meta property="og:image" content="https://example.com/img/some_image.jpeg">
Normally, this would not be a problem, but Vue.js adds hashes to all filenames, static images included.
Thus that tag above will actually look like this:
<meta property="og:image" content="https://example.com/img/some_image.09c37fe6.jpeg">
I could go edit this hash in every single time I build, but that's dumb and wouldn't work if I decided to go with a automatic build system. So, does Vue.js include any ways of automatically figuring out the hash for any given file?
I assume that this might have something to do with the <link rel="icon" href="<%= BASE_URL %>favicon.ico"> tag inserted by vue-cli, but I can't figure out what exactly what provides this functionality, and if it can be used.
I understand that disabling hashes is an option, but I'm curious if there is a solution that lets me keep hashes.
Didn't expect to be answering my own question immediately, it seems I've figured it out. Sorry if stuff like this is supposed to be insanely obvious to normal web developers.
Simply insert
require('./path/image.ext')
Files generated still use hashes, and if you're using said files in your actual src folder, relative paths work too:
<!-- Inside ./public/index.html-->
<!-- Accesses ./public/spirit.jpg -->
<meta property="og:image" content="<%= require('./img/spirit.jpg') %>">
<!-- Accesses ./src/assets/spirit.jpg -->
<meta property="og:image" content="<%= require('../src/assets/spirit.jpg') %>">