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