資訊專欄INFORMATION COLUMN
摘要：原文地址單文件中引用路徑的處理如有錯誤，歡迎指正單文件的開發過程中，在單文件模版中可能會涉及到文件路徑的處理，比如中的的處理等。的文檔中的資源路徑處理一節給出了是如何處理模版中的資源路徑的。
原文地址：vue單文件中引用路徑的處理
如有錯誤，歡迎指正！
vue單文件的開發過程中，在單文件模版中可能會涉及到文件路徑的處理，比如 , style 中的 background 的處理等。下文中討論了幾種不同場景下的
的 src 處理，解釋了在使用 vue+webpack 的開發過程中如何正確的引用靜態資源（比如圖片的處理）。
如下所示，在下面的單文件組件中給出了不同場景下引用圖片路徑的示例（圖片靜態資源存放在 src/assets/small.png ）：
上述代碼片段給出了四種場景下使用 img 標簽在 vue 單文件組件中引用圖片資源的方式。當然，這四種方式并不是都可以正確的加載圖片資源。
情況一：
在模版中直接以相對路徑綁定到src屬性，這種情況下可以正確加載圖片資源。我們知道，在 webpack 處理 vue 單文件組件的過程中，主要是 vue-loader 來做針對 *.vue 文件的處理。vue-loader 的文檔中 vue-loader 的資源路徑處理一節給出了 vue-loader 是如何處理模版中的資源路徑的。比如： , background: url(), @import等都將被作為模塊依賴處理。也就是說這幾種情況下 vue-loader 自動處理路徑的資源引用以及最后的路徑替換。其中對 img 的處理如下：
將會被 vue 模版編譯器編譯為：
createElement("img", { attrs: { src: require("./logo.png") }})
這也就解釋了為什么情況一可以正確顯示圖片內容，是因為 vue-loader 自動幫我們做了資源引入以及路徑替換問題。
情況二：
在模版中給 src 屬性綁定了相對路徑字符串變量，這種情況下圖片無法正常顯示。原因在于 vue-loader 無法識別變量是否為路徑字符串，因此也就不存在 vue-loader 自動引入資源以及路徑替換的問題了。這種情況下，編譯后的模版依然為相對路徑字符串。很顯然，沒有相應的資源引入以及錯誤的路徑，是無法正確的展示圖片的。
情況三：
很多人在相對路徑無法正確顯示的同時，嘗試進行了使用絕對路徑變量引入，顯然這種情況下也是不能顯示圖片的，因為圖片資源未被手動引入。注意： 很多同學嘗試手動引入資源然后按照絕對路徑變量綁定 src，發現 dist/static/img/ 路徑下確實有了被引用的資源，但是 vue-cli webpack 模版中 url-loader 對于 img 類型的文件在加載時，添加了 hash 值的處理。在這種情況下，即使我們綁定的是絕對路徑變量，因為無法正確匹配被添加 hash 值的圖片文件，我們還是無法正確的引用到圖片。在這種需要手動引入圖片的情況下，推薦情況四的處理方式。
情況四：
在模版中 src 屬性直接綁定手動引入的圖片資源，這種情況下可以正確的顯示圖片。這樣的方式也是 vue-loader 在處理自動引入路徑對應的資源時使用的辦法。
綜上，在 vue 單文件組件中，正確的顯示一個圖片的關鍵：
該圖片資源被 require 或 import ，即會被 webpack 的 url-loader 處理到最后的目錄中
img src 屬性需要被替換為最后的圖片資源路徑
以上兩點缺一不可。情況一以及情況四最后之所以能夠正確的顯示了圖片，就在于兩種情況下滿足了以上兩個條件。情況一中 vue-loader 自動幫我們做了這個事情，情況四我們手動做了這個事情。
開發中可能遇到的問題：
開發中可能會遇到循環渲染一個圖片列表的場景，根據上面的總結，我們可以構造一個圖片信息對象數組，比如：
這樣我們就可以完美的顯示我們循環渲染的圖片了。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90719.html
摘要：而多頁面應用的入口文件是所有需要用到的頁面。單文件應用和多文件應用上，是大同小異的，區別就討論到這里了。 1.前言 這幾天，都遇到過有人問過相似的問題，就是用vue和webpack搭建目錄的時候，怎么把單頁面應用的配置改成多文件應用，或者是怎么把多文件應用的配置改成單文件應用。這個情況，我之前有處理過，公司的同事教過我，我就針對這個情況寫下此篇文章。各位如果覺得我哪里寫得不夠好，寫錯了...
摘要：是中的條件指令，根據返回的布爾值動態添加或移除元素。傳值方式我是標題需要在中定義函數傳的值為字符串，不需要前綴傳的值為非字符串數字布爾值函數數組對象，為前綴，值為表達式計算結果在程序中，如引用的值。為該組件內，元素綁定的事件處理函數。 視圖 包含內容#NavigationBar、#TabBar、#MainContext； 為什么#NavigationBar、#TabBar分在Layou...
摘要：由于公司的前端開始轉向，最近開始使用這個框架進行開發，遇到一些問題記錄下來，以備后用。查了一下，發現可能是打包或是資源引用問題，目前該問題還未被妥善處理，需要通過一些來解決這個問題。為解決這個問題，中提供了方法對象受現 showImg(https://segmentfault.com/img/bVFgor?w=1280&h=720); 由于公司的前端開始轉向 VueJS，最近開始使用這...
摘要：如果沒有文件，則讀取文件夾下的或者。如果都都找不到，拋出錯誤。 JS表達式 函數（方法）調用表達式 test() //函數調用表達式 屬性調用表達式 var obj = {name:wt}; var arr = [123,bai]; obj.name //屬性調用表達式 arr[0] //屬性調用表達式 變量（常量）調用表達式 let name = wutao; name ...
摘要：放置在目錄下或通過絕對路徑被引用。對于相關來說，我們推薦使用而不是直接鏈式指定。在不更改配置文件的情況下，前端頁面迭代發布，不需要重啟服務。 作者：gauseen 0. 關于 Vuejs 簡介：Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架，易用、靈活、高效。 生態系統 項目 介紹 awesome-vue Vue.js 相關很棒的...
閱讀 2548·2023-04-25 19:47
閱讀 3388·2019-08-29 17:18
閱讀 858·2019-08-29 15:26
閱讀 3364·2019-08-29 14:17
閱讀 1127·2019-08-26 13:49
閱讀 3342·2019-08-26 13:22
閱讀 3027·2019-08-26 10:44
閱讀 2698·2019-08-23 16:51
