Javascript 在VueJS组件中引用静态资源

我有一个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>

你好

导出默认值{
名称：“应用程序”，
数据（）{
返回{
imageURL:“./dist/loading.gif”，
msg:'欢迎使用您的Vue.js应用程序'
}
},
}

我已经安装了webpack来构建“clickableimage.js”文件，并将其放入“dist”文件夹

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

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

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

我是不是遗漏了什么？我无法跟踪浏览器如何加载文件。VueJS在幕后表演魔术吗

附言：为了确定，我在FF的一个匿名窗口中打开了URL，以防浏览器可能显示缓存版本，但它也可以在那里工作

我的网页配置如下

---

我只是在这里进行头脑风暴。。。我认为这与热模块的重新加载不是完美的有关。如果您将其设置为

”/assets/load.gif“

，那么它将匹配

测试：/\（png | jpg | gif | svg）$/

，并将生成一个base64编码的图像，该图像嵌入到它绑定的脚本中（而不是放在dist文件夹中）。现在，当您将其更改为

“/dist/loading.gif”

时，可能发生的情况是，它仍然在脚本中搜索

loading.gif

，该脚本在开发环境中可能仍然可用，因为您最初使用

“/assets/loading.gif”

运行开发服务器。我不是专家，但我认为您的网页包配置中的img加载程序正在获取您的

”/dist/loading.gif“

，并在最初构建的其中一个网页包块中智能地查找图像。如果用

“/dist/loading.gif”

启动开发服务器，我猜它也不会像您最初期望的那样工作。

如果您这样做

imageURL:require（“/dist/loading.gif”），

，它会工作吗？