在 VueJS 组件中引用静态资产答案

【问题标题】：Referencing static assets in VueJS Components在 VueJS 组件中引用静态资产
【发布时间】：2017-09-16 00:40:10
【问题描述】：

我有一个 VueJS 项目（根据 vue-cli 提供的基本“webpack-simple”模板定制），具有以下文件夹结构

我正在开发“clickableimage.vue”组件，但无法引用图片等资产。该组件的代码如下。

<template>
<div id="clickableimagecomponent">

<img :src="imageURL" ></img>
<p>Hello There....</p>

</div>
</template>

<script>
 export default {
  name: 'app',
  data () {
   return {
    imageURL:"./dist/loading.gif",
    msg: 'Welcome to Your Vue.js App'
  }
 },

}
</script>

我已经设置 webpack 来构建“clickableimage.js”文件并将其放入“dist”文件夹中。

我面临的问题是，在组件中，当我将 src（没有任何 vue 绑定）用于 img 标签作为“./assets/loading.gif”时，它可以工作。

但是，当 dist 文件夹中没有“loading.gif”文件时，上述代码也可以工作。在FF中调试JS显示如下。

很明显，文件是从 dist/loading.gif 加载的，但是文件夹中不存在这样的文件。

我在这里错过了什么吗？我无法追踪浏览器是如何加载文件的。 VueJS 在幕后有什么魔力吗？？

P.S : 可以肯定的是，我已经在 FF 的隐身窗口中打开了 URL，以防浏览器可能显示缓存版本，但它也可以在那里工作。

我的 webpack 配置如下..

【问题讨论】：

如果你做这样的事情imageURL: require("./dist/loading.gif"),，那么它会起作用吗？

标签： javascript web-applications webpack vue.js

【解决方案1】：

我只是在这里集思广益...我认为这与热模块重新加载不完美有关。如果您将其命名为"./assets/loading.gif"，那么它将与test: /\.(png|jpg|gif|svg)$/ 匹配，并且应该会生成一个base64 编码的图像，该图像会嵌入到它捆绑的脚本中（而不是放在dist 文件夹中）。现在，当您将其更改为"./dist/loading.gif" 时，可能发生的情况是它仍然在脚本中搜索loading.gif，因为您最初使用"./assets/loading.gif" 运行开发服务器，所以在开发环境中可能仍然可用。我不是专家，但我认为您的 webpack 配置中的 img-loader 正在获取您的 "./dist/loading.gif" 并智能地在最初构建的 webpack 块之一中查找图像。如果你用"./dist/loading.gif" 启动开发服务器，我猜它也不会像你最初预期的那样工作。

【讨论】：