給uniapp的擴展組件uni-file-picker設置默認顯示的圖片

官方給出的代碼如下所示,但是按照官網給出的代碼圖片并沒有顯示出來。

<template><uni-file-picker readonly :value="fileLists" :imageStyles="imageStyles" file-mediatype="image"></uni-file-picker>
</template><script>export default {data() {return {imageStyles: {width: 64,height: 64,border: {radius: '50%'}},listStyles: {// 是否顯示邊框border: true,// 是否顯示分隔線dividline: true,// 線條樣式borderStyle: {width: 1,color: 'blue',style: 'dashed',radius: 2}},fileLists: [{url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg',extname: 'png',name: 'shuijiao.png'}, {url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg',extname: 'png',name: 'uniapp-logo.png'}, {url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg',extname: 'png',name: 'shuijiao.png'}]}},methods: {}}
</script>

解決方法:

將以上代碼中的 :value = "fileLists" 修改為 v-model = "fileLists"即可。

注意:

  • fileLists中每一項的?url、extname、name?三個屬性是必須要寫的,否則會影響組件的顯示。
  • 其中url的值不能為本地圖片的路徑。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/17754.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/17754.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/17754.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

FLutter里的“線程” 一文通關

前言 在Flutter中&#xff0c;啟動一個新線程來處理任務通常是指在另一個隔離區(isolate)中執行代碼。由于Dart使用單線程模型&#xff0c;它通過隔離區來實現并發。隔離區是獨立的執行線程&#xff0c;不共享內存&#xff0c;通過消息傳遞來通信。這種方法可以用來運行長時間…

JavaScript 自定義屬性操作

在 JavaScript 中&#xff0c;可以使用自定義屬性來存儲與元素相關的數據。自定義屬性允許開發人員在元素上存儲任何類型的數據&#xff0c;包括字符串、數字、對象等。接下來&#xff0c;我將詳細解析如何在 JavaScript 中操作自定義屬性&#xff0c;并提供相應的代碼示例。 …

四川農業大學Java實訓項目圓滿收官,匯智知了堂引領學子實踐創新

近日&#xff0c;四川農業大學與匯智知了堂共同舉辦的Java實訓項目正式迎來了項目匯報階段。本次實訓是匯智知了堂在高等教育領域深化校企合作、推動產教融合的一次重要實踐&#xff0c;旨在為廣大學子提供一個將理論知識與實際操作相結合的平臺。 在實訓過程中&#xff0c;匯…

cherry-markdown公式不好選中的問題

在我上一篇博客中&#xff0c;在解決公式插入預覽無效之后&#xff0c;還f發現cherry-markdown是通過css的:hover來進行公式的展示&#xff0c;導致不好選中 上一篇博客速達&#xff1a;cherry-markdown公式能插入但是預覽無效-CSDN博客 下面是解決方案&#xff0c;其實就是改…

selenium源碼學習

這里寫自定義目錄標題 歡迎使用Markdown編輯器新的改變功能快捷鍵合理的創建標題&#xff0c;有助于目錄的生成如何改變文本的樣式插入鏈接與圖片如何插入一段漂亮的代碼片生成一個適合你的列表創建一個表格設定內容居中、居左、居右SmartyPants 創建一個自定義列表如何創建一個…

vr數字成果展在線展示突破用戶傳統認知

想要輕松搭建一個充滿互動與創意的3D數字展廳嗎?vr互動數字展廳搭建編輯器將是您的不二之選!華銳視點3D云展平臺提供的vr互動數字展廳搭建編輯器將空間重建與互動制作完美結合&#xff0c;讓您輕松實現3D空間的搭建與互動營銷制作。 在vr互動數字展廳搭建編輯器的幫助下&#…

ai語音機器人工作的原理流程電銷機器人部署

ai機器人電銷其實就相當于一個程序&#xff0c;可以代替人工進行一個電話外呼工作&#xff0c;可以模擬真人對話、智能回答客戶問題。 其實機器人這個東西很早之前就已經有了&#xff0c;但是近幾年&#xff0c;才被電銷企業所應用。目前ai機器人電銷已經取代了一部分人工&…

牛客題霸-SQL大廠面試真題(一)

本文基于前段時間學習總結的 MySQL 相關的查詢語法&#xff0c;在牛客網找了相應的 MySQL 題目進行練習&#xff0c;以便加強對于 MySQL 查詢語法的理解和應用。 由于涉及到的數據庫表較多&#xff0c;因此本文不再展示&#xff0c;只提供 MySQL 代碼與示例輸出。 以下內容是…

抖店類目錯放怎么辦?怎么改類目?快速解決抖店類目錯放問題

大家好&#xff0c;我是電商花花。 我們運營抖音小店的時候&#xff0c;都知道不要放錯類目&#xff0c;也知道放錯類目的后果&#xff0c;類目錯放可能導致商品無法在正確的類目中展示&#xff0c;從而影響到商品的一個曝光率。 嚴重的話還被平臺扣分&#xff0c;扣保證金&a…

隱藏服務器源IP怎么操作,看這一篇學會!

在當今的網絡環境中&#xff0c;服務器作為信息和服務的中樞&#xff0c;常駐于公網之上&#xff0c;面臨著各式各樣的安全威脅&#xff0c;其中&#xff0c;分布式拒絕服務&#xff08;DDoS&#xff09;攻擊尤為猖獗&#xff0c;它通過協調大量計算機同時向目標服務器發送請求…

跳繩步法匯總

跳繩步法 跳繩是一項多樣化且富有樂趣的運動&#xff0c;擁有許多不同的步法和技巧。以下是一些常見的跳繩步法&#xff1a; 1. 基本步法 雙腳并跳&#xff1a;雙腳并攏一起跳&#xff0c;每次跳繩通過腳下時雙腳同時離地。單腳跳&#xff1a;用一只腳跳&#xff0c;另一只腳…

設計一套Kafka到RocketMQ的雙寫+雙讀技術方案,實現無縫遷移!

設計一套Kafka到RocketMQ的雙寫雙讀技術方案&#xff0c;實現無縫遷移&#xff01; 1、背景2、方案3、具體邏輯 1、背景 假設你們公司本來線上的MQ用的主要是Kafka&#xff0c;現在要從Kafka遷移到RocketMQ去&#xff0c;那么這個遷移的過程應該怎么做呢&#xff1f;應該采用什…

JAVA開發面試超詳細

一、Java 基礎 1.JDK 和 JRE 有什么區別&#xff1f; jdk&#xff1a;java development kit jre&#xff1a;java runtime Environment jdk是面向開發人員的&#xff0c;是開發工具包&#xff0c;包括開發人員需要用到的一些類。 jre是java運行時環境&#xff0c;包括java虛擬機…

Selenium探險家:駕馭Web自動化的秘籍與實戰

Hi&#xff0c;我是阿佑&#xff0c;今天將帶大伙們學會如何使用Selenium進行高效的網站測試&#xff0c;如何配置Selenium Grid實現分布式測試&#xff0c;以及如何預測和擁抱自動化測試的未來&#xff01; 文章目錄 1. 引言2. 背景介紹2.1 Selenium概覽2.2 Python與Selenium的…

python數據可視化:自定義閉合區域填充顏色matplotlib.pyplot.fill()

【小白從小學Python、C、Java】 【考研初試復試畢業設計】 【Python基礎AI數據分析】 python數據可視化&#xff1a; 自定義閉合區域填充顏色 matplotlib.pyplot.fill() [太陽]選擇題 以下關于matplotlib.pyplot.fill()函數說法正確的是&#xff1f; import matplotlib.pyplo…

【ARM+Codesys案例】T3/RK3568/樹莓派+Codesys鋰電疊片機方案:結合CODESYS實現高效生產

鋰電疊片機解決方案 乘風破浪&#xff0c;促進新能源行業發展 鋰電池是依靠鋰離子在正極與負極之間移動來達到充放電目的的一種可充電電池&#xff0c;具有高能量密度、高電壓、壽命長、無記憶效應等優點。鋰電池屬于國家政策扶持的高速發展行業&#xff0c;近年發展快速&…

【Beyond Compare】專業的文件對比工具

一、Beyond Compare官方下載 二、Beyond Compare簡介 三、Beyond Compare 4激活 一、Beyond Compare官方下載 Beyond Compare官方下載 https://www.beyondcompare.cc/ Beyond Compare 4中文包 鏈接&#xff1a;https://pan.baidu.com/s/14igdUm0Xy7DFp4Jzb58AZg?pwdGLNG 提…

newinit.sh挖礦攻擊處理與規避方案

目錄 攻擊分析 恢復措施&#xff1a; 問題排查 攻擊入口分析 預防 臨時處理方案&#xff1a; 攻擊分析 攻擊者&#xff1a;職業黑客&#xff08;99%&#xff09; 攻擊方式&#xff1a;挖礦病毒newinit.sh和蠕蟲病毒pnscan 中毒現象: 服務器負載異常&#xff0c;具體表…

CTFHUB技能樹——SSRF(一)

目錄 一、SSRF(服務器端請求偽造) 漏洞產生原理: 漏洞一般存在于 產生SSRF漏洞的函數&#xff08;PHP&#xff09;&#xff1a; 發現SSRF漏洞時&#xff1a; SSRF危害&#xff1a; SSRF漏洞利用手段&#xff1a; SSRF繞過方法&#xff1a; 二、CTFHUB技能樹 SSRF 1.Ht…

結構體的偏移地址,首地址的宏計算

C語言的庫函數中提供了計算結構體的一個元素在結構體中的偏移量&#xff0c;以及通過偏移量和結構體中元素的指針計算出來結構體的首地址。但是在一些場景沒有辦法使用C語言庫中的函數&#xff0c;那么就需要自己進行定義。 如下面代碼所示的兩個宏定義就完成了計算結構體成員偏…