在Vue组件模板中导入图像

时间:2019-02-04 16:10:31

标签: vue.js webpack

我使用vue-cli 3创建了一个vue项目,在本地环境中工作时,我设法通过以下方式将所有图像显示在html部分中:

<template>
   <img class="logo" src="@/assets/images/logo.svg" alt="logo">
</template>

在我的机器中,映像的完整路径(从src文件夹作为根目录开始)是src/assests/images/logo.svg 在本地环境上运行项目时,图像会加载,其来源是 /assets/images/logo.svg重定向到http://localhost:8080//assets/images/logo.svg。 现在,当我将项目上传到我的暂存环境时,源更改为src="/img/logo.230e726c.svg"(并且我无法弄清原因),并且图像丢失。 我在网上找到的以下信息我也尝试过:

src="~@/assets/images/logo.svg"效果不佳。 知道我在这里缺少什么,应该如何在模板中导入图像?还是源网址是如何转到此(似乎是非常随机的)路径的?

更新

我注意到在我的本地计算机上,在开发工具中检查结果时,内容类型为Content-Type: image/svg+xml; charset=UTF-8,而在暂存中检查内容类型为content-type: text/html 时,还有另一个标头我不确定是否出现在舞台及其content-encoding: gzip 中,但这是否可以作为线索?

另一件事值得一提,当尝试上传png时,每件事都可以正常工作,并且图像看起来像这样:

<img data-v-7d622f5c="" src="data:image/png;base64,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" alt="logo" class="logo">

0 个答案:

没有答案