引用在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組件

回答

相關問題