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

Question

我有一个 vue-cli 3 项目设置，其目录结构如下：所有静态资产都加载到public 目录中，并在localhost 上成功编译和构建。如下图所示，Guyana-live-logo.png、slide-1.jpg和970x250-ad.png都加载成功，但是浏览器中只显示了 logo 和广告图片。我试过的更改图像的引用方式。原始 - 适用于几乎所有其他图像<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'"/>将图像移动到 src 目录和 component 子目录中，这两者都被证明是徒劳的。更新 vue-loader为生产构建并仅提供 /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：

  data() {

    return {

      img: image,

    };

  },

然后在你的 HTML 中：

<img :src="image"/>

这解决了在使用 Parcel Bundler 构建时尝试访问图像时的问题