使用 vue-cli 3.x 加载静态资源

Question

我有一个 vue-cli 3 项目设置，其目录结构如下：

所有静态资产都加载到public 目录中，并在localhost 上成功编译和构建。

如下图所示，Guyana-live-logo.png、slide-1.jpg和970x250-ad.png都加载成功，但是浏览器中只显示了 logo 和广告图片。

我试过的

1. 更改图像的引用方式。

原始 - 适用于几乎所有其他图像

<img src="/img/slide-1.jpg"/>

测试 0 - 这加载了附加了哈希值的图像 (slide-1.1b0ahsa.jpg) 但它仍然没有出现在浏览器中

<img src="../../../public/img/slides/slide-1.jpg">

测试 1 - 使用 v-bind

<img :src="'/img/slide-1.jpg'"/>

1. 将图像移动到 src 目录和 component 子目录中，这两者都被证明是徒劳的。

2. 更新 vue-loader

3. 为生产构建并仅提供 /dist 文件夹

重点说明

• 控制台或我的错误跟踪软件不会产生错误。

• 图像格式似乎不是问题，一些.png加载而另一些则没有，对于.jpg.

• 一些 JavaScript 文件受到影响。JS 文件被这样调用：<script type="text/javascript" src="<%= BASE_URL %>js/script.js"></script>在public/index.html

Answer 1

图像将需要位于您尝试访问它们的文件的同一目录或子目录中（即在Components目录中）。您还可以尝试通过其 URL 访问图像<img src="http://localhost:8080/img/guyana-live-logo.png" />吗？这应该有效，但您可能不想以这种方式使用它。您可能可以使用的另一种可能性是这样做：<script>import image from './img/slide-1.jpg'...然后在 Vue 中data：&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; img: image,&nbsp; &nbsp; };&nbsp; },然后在你的 HTML 中：<img :src="image"/>这解决了在使用 Parcel Bundler 构建时尝试访问图像时的问题