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

Question

我的vue-cli 3项目设置具有以下目录结构：

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

如下图所示， guyana-live-logo.png ， slide-1.jpg 和 970x250-ad.png 均已成功加载，但是，徽标和广告图像仅显示在浏览器中。

我尝试过的

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文件的调用方式如下： public / index.html
中的<script type="text/javascript" src="<%= BASE_URL %>js/script.js"></script>

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进行构建时尝试访问图像的问题