如何使用 webpack 将本地图像加载到 html 中的元标记

Posted 2023-02-22

【中文标题】如何使用 webpack 将本地图像加载到 html 中的元标记

【英文标题】：How to load local image to meta tag in html with webpack

【发布时间】：2019-03-27 10:21:17

【问题描述】：

我有一个应该像这样的元标记

<meta property="og:image" content="https://mywebsite/img.jpg" />

我不能只设置为'./images/img.jpg'

我使用 webpack 从我的 vue 应用程序中编译我的背景图像，这样我就可以将这个图像加载到我的模板中的某处作为背景，然后将其设置为 index.html 到 build 文件夹中。但是这样做似乎很奇怪，而且 webpack 也会对图像进行哈希处理，因此每次构建后它们都有不同的名称。

有出路吗？我可以为此使用HtmlWebpackPlugin 吗？

【问题讨论】：

可能是'../images/img.png'（注意两个点）？还要检查 this guide 以通过 webpack 处理图像

您找到解决方案了吗？

@ARaj123 是的，我确实喜欢下面

【参考方案1】：

好的，我想我用 index.html 中的这行代码解决了问题（不在构建文件夹中）

<meta property="og:image" content="<%= require('./images/img.jpg') %>" />

【讨论】：

您能否指定用于捆绑的模块？

FB找到图片了吗？你得到图像的完整路径了吗？我只得到相对的