當前位置:首頁 » 文件傳輸 » vue訪問本地存儲的圖片
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

vue訪問本地存儲的圖片

發布時間: 2022-11-03 11:21:35

① Vue 圖片資源路徑問題

web需要大量圖片,圖片來源大致分為這幾個:

靜態的應該是指類似 logo 之類的,用作頁面修飾的圖片。

動態的是指從伺服器動態得到的(如博客圖片每一篇都不一樣,需要動態獲取)。

寫法大致分為這幾個:

由於是新手,所以不從原理探究,而是了解用法。

仔細觀察項目目錄,分有 public 和 asserts 文件夾:

顧名思義,這兩個文件夾應該管控資源。

首先從asserts開始。

我們首先打開 App.vue ,查看template:

裡面定義了一個 Vue logo,其中引用了asserts文件夾的圖片。根據路徑,我們可以找到圖片路徑。那麼如果我們有其他圖片,自然也可以類比使用。

接下來我們看看在更高層目錄(組件)中是否也可以通過這種方式使用:

上面我們在 components 文件夾中使用,通過 .. 嘗試使用asserts文件加下的logo圖片,然後查看效果:

出現了兩個 logo 圖片,第一個是在 App.vue 中使用的,第二個是在我們的 hello world 組件中使用,符合預期。

那麼類推,在任何位置的組件我們可以直接在 img 標簽中使用 asserts 的圖片標簽。

這種方法應該是靜態的,因為在 Vue 中,我們不該使用 js 獲取。

除去 img 標簽,另一個十分重要的圖片引入方法為通過 background-image 屬性引用,試試看是否有效:

我們定義了一個 div 標簽,佔用 200x200空間,並讓 background-image 引用與 img 標簽相同的路徑:

結果顯示 div確實存在,但是背景圖沒有顯示出來,怎麼回事?

按下 F12 打開 dev tools , 讓我們檢查下路徑:

可以看到 img 標簽的 src 變為了 /img/logo.82b9c7a5.png , 而不是我們寫入的 ../assets/logo.png ,而 div 的背景路徑沒有發生改變,導致無法顯示正確的背景圖片。

通過這種方式可以了解到: img 標簽的路徑會被正確轉換,而 background-image 不會被轉換。

舉一反三,我們嘗試在 data 中寫入路徑引用:

那麼這個img路徑自然也不會被處理,從而無法顯示。

public 文件夾在項目根目錄。

根據搜索到的資料, public 文件夾不會被 webpack 處理,你用什麼路徑引用他就是什麼,那麼原理上,我們可以在 img

, background-image , data 中正確的引用它。

可以看到,在這個文件夾下直接引用了 favicon.ico 並且成功載入了。

類比,在我們的 helloworld 組件中使用:

(為了效果明顯,我把logo在public文件夾下拷貝了一份)。

結果, asserts 引用與 public 引用都得到了正確的顯示。

再結合之前對 asserts 的探究,通過在文件末尾添加哈希值,避免了public的命名沖突。

因為是新手,所以只能從表觀來理解,希望以後隨著深入能從原理上理解。

asserts 文件夾下的資源會被 webpack 處理(添加哈希值等等),導致直接引用無法找到文件。

public 文件夾下的資源不會被處理,可以直接通過路徑引用。

結合之前的需求(動態與靜態資源),我總結了下面想法:

② vue流程圖怎麼保存

可以保存到本地或者復制粘貼。
如果想保存vue的流程圖的話,可以點擊右鍵,選擇保存到本地,如果不支持的話。可以復制圖片,然後粘貼到電腦桌面上,以此來完成保存。
流程圖是使用圖形表示演算法的思路是一種極好的方法,因為千言萬語不如一張圖。流程圖在匯編語言和早期的BASIC語言環境中得到應用。相關的還有一種PAD圖,對PASCAL或C語言都極適用。

③ 在vue項目開發中, 為什麼圖片要用require 引入。。。而不是直接寫本地路徑

使用require定義之後,你就可以動態使用了,不用require你就只能寫死的。
不用 :src="'../img/image.jpg'" 會被解析為字元串

<imgsrc="../img/image.jpg">//正常載入
<img:src="'../img/image.jpg'">//動態地址,路徑被載入器解析為字元串,圖片找不到


使用

src1:require('../img/image1.jpg'),
src2:require('../img/image2.jpg'),
index:1,
<img:src="index=0?src1:src2">//動態地址,正常載入

④ vue怎樣獲取到本地D盤下的指定文件,並且能顯示出來,讀取內容方法一行行讀取,不能用input/upload。

沒有其他辦法。
google可能讓開發者能隨意獲取用戶信息嗎?
請採納

⑤ vue移動端項目中 我需要點擊按鈕保存一張圖片,測試中pc端是可以的, 移動端保存不了

可能和a標簽的download屬性兼容性有關系,對於不支持的瀏覽器可以引導用戶以右鍵另存為或長按保存的方式下載

⑥ vue中,圖片<img src="path"/>如何載入絕對路徑的圖片例如:D:/photo/fileName

assets:在項目編譯的過程中會被webpack處理解析為模塊依賴,只支持相對路徑的形式,如< img src=」./logo.png」>和background:url(./logo.png),」./logo.png」是相對資源路徑,將有webpack解析為模塊依賴

static:在這個目錄下文件不會被webpack處理,簡單就是說存放第三方文件的地方,不會被webpack解析。他會直接被復制到最終的打包目錄(默認是dist/static)下。必須使用絕對路徑引用這些文件,這是通過config.js文件中的build.assetsPublic和build.assertsSubDirectory鏈接來確定的。任何放在static/中文件需要以絕對路徑的形式引用:/static[filename]

根據webpack的特性,總的來說就是static放不會變動的,第三檔的文件,asserts放可能會變動的文件。

⑦ qqvue瀏覽器可以點擊保存圖片嗎

可以,用手按住圖片,就會出現圖中的「保存圖片」和「查看圖片」,點擊「保存圖片"保存。

⑧ vue的css裡面怎麼引用public文件夾裡面的圖片呢

可以用"@"指向src目錄,再找到public目錄。
也可以在發布的時候直接使用根目錄的結構,即使用"/"作為根目錄,然後按路徑找到public目錄。

⑨ vue.js項目開發,base64格式圖片怎麼在前端頁面顯示

首先直接把base64編碼復制到瀏覽器裡面看是否能正常查看,
如果能img 直接 src 賦值就OK了
如果不能就是圖片損壞了~~望採納謝謝~

⑩ vue.js在data中寫了一個mydata對象,裡麵包含一個圖片路徑,怎樣寫才能成功載入圖片。

已經明白你的問題所在了。 可以參考下面的代碼

//js代碼
data:{
myData:[{
img:require('../img/001.png'),//require是一個方法不能放在引號下面,否則獲取不到url地址
name:'xxxx',
bigsmall:'xxxxxx',
descript:'xxxxxx',
}]
}
<!--html代碼-->
<img:src="item.img"class="thumb">

你可以試一下, 有問題追評,希望可以幫到你