解決Vue+Vite打包后Leaflet的marker圖標不顯示的問題

前言

用Leaflet寫關于WebGIS的開發,用Vite或者webpack打包,打包后會找不到圖標,如下所示。

直言的說,筆者去網上搜了搜,其實收到一個比較好是答案。網址如下。

(完美解決~)關于Vue+Leaflet添加market時,圖片不顯示的問題_vue2leafletjs地圖添加marker不顯示-CSDN博客

這位大佬的方法是可以的。以前筆者遇到這個問題是這樣解決的。但筆者發現了第三種方法。

解決方法

將目錄node_modules/leaflet/dist/images中的maker-icon-2x.png和marker-shadow.png文件復制到pubilc目錄下。

再次打包,路徑中出現那兩張png圖片,運行沒有問題。

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

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

相關文章

eslint 與 prettier 的一些常見的配置項(很詳細)

目錄 1、eslint 常見配置項(語法規范) 2、 prettier 常見的配置項(格式規范) 代碼規范相關內容看小編的該文章,獲取對你有更好的幫助 vsCode代碼格式化(理解eslint、vetur、prettier,實現格式…

IDEA啟動報錯:Abnormal build process termination...

一、問題描述 因為項目需要,同時打開了兩個idea,突然發現一個啟動的時候報錯,有點莫名其妙,剛還好好的,為啥就不能用了,一頓百度找方法,試了各種方法,像重新安裝jdk、重啟系統發現都…

TensorFlow開源項目

歡迎來到 Papicatch的博客 文章目錄 🍉TensorFlow介紹 🍉主要特點和功能 🍈多語言支持 🍈靈活的架構 🍈分布式訓練 🍈跨平臺部署 🍈強大的工具鏈 🍈豐富的社區和生態系統 &a…

c++基本數據類型和計算(一)習題講解

1.【單選題】以下說法正確的是? A. unsigned 類型的值 最大為0xFFFFFFFF B. float類型的值大約有15位精度 C.bool類型占用4個字節 解析: 選項A:unsigned 類型的值 最大為 4個字節,正確。選項B: 因為float類型的值是單精度的浮…

Vue3基礎使用

目錄 一、創建Vue3工程 (一)、cli (二)、vite 二、常用Composition API (一)、setup函數 (二)、ref函數 (三)、reactive函數 (四)、setup注意事項 (五)、計算屬性 (六)、watch (七)、watchEffect函數 (八)、生命周期 1、以配置項的形式使用生命周期鉤子 2、組合式…

kafka-簡單代碼實現生產者消費者

生產者代碼: package com.kafka.test;import org.apache.kafka.clients.producer.KafkaProducer; import org.apache.kafka.clients.producer.ProducerConfig; import org.apache.kafka.clients.producer.ProducerRecord; import org.apache.kafka.common.seriali…

【機器學習-10】 | Scikit-Learn工具包進階指南:Scikit-Learn工具包之支持向量機模塊研究

🎩 歡迎來到技術探索的奇幻世界👨?💻 📜 個人主頁:一倫明悅-CSDN博客 ?🏻 作者簡介: C軟件開發、Python機器學習愛好者 🗣? 互動與支持:💬評論 &…

高考填報志愿攻略,5個步驟選專業和院校

在高考完畢出成績的時候,很多人會陷入迷茫中,好像努力了這么多年,卻不知道怎么規劃好未來。怎么填報志愿合適?在填報志愿方面有幾個內容需要弄清楚,按部就班就能找到方向,一起來了解一下正確的步驟吧。 第…

入局AI手機 蘋果公布Apple Intelligence

日前,蘋果WWDC 2024如期召開。在這持續1個小時44分鐘的開發者大會上,蘋果在前一個小時里更新了iOS、iPadOS、MacOS等操作系統,而且還首次更新了visionOS。余下的時間全部留給了蘋果的“AI大禮包”——Apple Intelligence(蘋果智能…

請說明Thread類中run和start的區別,從方法的區別,及運行結果的區別分別說明

方法本身的區別 start() 方法: run()方法是Thread類的一個普通方法,它包含了線程要執行的代碼。當你直接調用一個線程的run()方法(如myThread.run()),你實際上是在當前線程(通常是主線程)中執行…

PointCloudLib-濾波模塊(Filtering)-使用參數化模型投影點

在本教程中,我們將學習如何將點投影到參數化模型上 (例如,平面、球體等)。參數模型通過一組 系數 – 在平面的情況下,通過其方程:ax + by + cz + d = 0。 代碼 #include <iostream> #include <pcl/point_cloud.h> // for PointCloud #include <pcl/point…

mysql是什么

mysql是什么 是DBMS軟件系統&#xff0c;并不是一個數據庫&#xff0c;管理數據庫 DBMS相當于用戶和數據庫之間的橋梁&#xff0c;有超過300種不同的dbms系統 mysql是關系型數據庫&#xff0c;關系型數據庫存儲模型很想excel&#xff0c;用行和列組織數據 sql是一門編程語言…

關于ip地址的網頁無法訪問navigator的gpu、媒體、藍牙等設備的解決方法

在使用threejs的WebGPURenderer渲染器時&#xff0c;發現localhost以及127.0.0.1才能訪問到navigator.gpu&#xff0c;直接使用ip會變成undefined,原因是為了用戶的隱私安全&#xff0c;只能在安全的上下文中使用&#xff0c;非安全的上下文就會是undefined&#xff0c;安全上下…

谷歌云(GCP)4門1453元最熱門證書限時免費考

谷歌云(GCP)最新活動&#xff0c;完成免費官方課程&#xff0c;送4門最熱門考試免費考試券1張(每張價值200刀/1453元)&#xff0c;這4門也包括最近大熱的AI/ML考試&#xff0c;非常值得學習和參加&#xff0c;活動7/17截止 谷歌云是全球最火的三大云計算廠商(前兩名AWS, Azure…

MySQL索引優化解決方案--索引失效(3)

索引失效情況 最佳左前綴法則&#xff1a;如果索引了多列&#xff0c;要遵循最左前綴法則&#xff0c;指的是查詢從索引的最左前列開始并且不跳過索引中的列。不在索引列上做任何計算、函數操作&#xff0c;會導致索引失效而轉向全表掃描存儲引擎不能使用索引中范圍條件右邊的…

【Linux】進程信號_1

文章目錄 八、進程信號1.信號 未完待續 八、進程信號 1.信號 信號和信號量之間沒有任何關系。信號是Linux系統提供的讓用戶/進程給其他進程發送異步信息的一種方式。 常見信號&#xff1a; 當信號產生時&#xff0c;可選的處理方式有三種&#xff1a;①忽略此信號。②執行該…

小程序注冊

【 一 】小程序注冊 微信公眾平臺 https://mp.weixin.qq.com/ https://mp.weixin.qq.com/注冊 郵箱激活 小程序賬戶注冊 微信小程序配置 微信小程序開發流程 添加項目成員 【 二 】云服務 lass 基礎設施服務&#xff08;組裝機&#xff09; 你買了一大堆的電腦配件&#x…

AI早班車2024.6.25

全球AI新聞速遞 1.高通&#xff1a;開放 AI 模型&#xff0c;幫助開發者打造驍龍 X Elite 平臺智能應用。 2.OpenAI&#xff1a;收購數據庫分析公司Rockset。 3.大眾海外版車型支持 ChatGPT。 4.樂聚夸父人形機器人&#xff0c;搭載華為云盤古具身智能大模型。 5.微軟正努力…

Day45

Day45 jQuery動畫 顯示和隱藏 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><script src"js/jquery-1.8.2.js" type"text/javascript" charset"utf-8"></script&…