引用在VueJS组件

我有一个VueJS项目静态资产具有以下文件夹结构（从基通过VUE-CLI提供“的WebPack，简单的”模板定制）引用在VueJS组件

我开发了“ 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配置如下：..

来源

2017-04-19 Raghavendra Kumar

如果你这样做'imageURL：require（“./ dist/loading.gif”），'，它会工作吗？ –

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

来源

2017-04-19 19:08:55 Theo

引用在VueJS组件

回答

相关问题