วิธีแสดงภาพในเครื่องใน markdown

ฉันลองทำสิ่งต่อไปนี้ใน markdown แต่ดูเหมือนจะไม่ได้ผลมีใครรู้วิธีแสดงภาพในเครื่องใน markdown บ้าง? ฉันไม่ต้องการตั้งค่าเว็บเซิร์ฟเวอร์สำหรับสิ่งนั้น ขอบคุณ

![image](files/Users/jzhang/Desktop/Isolated.png)

สงสัยเส้นทางไม่ถูกต้อง ตามที่กล่าวไว้โดย user7412219 ubuntu และ windows จัดการกับเส้นทางที่แตกต่างกัน ลองวางภาพไว้ในโฟลเดอร์เดียวกับ Notebook ของคุณและใช้:

![alt text](Isolated.png "Title")

บน windows เดสก์ท็อปควรอยู่ที่: C: \ Users \ jzhang \ Desktop

ต่อไปนี้ใช้งานได้กับพา ธ สัมพัทธ์ไปยังรูปภาพในโฟลเดอร์ย่อยถัดจากเอกสาร (ขณะนี้ได้รับการทดสอบบนระบบ Windows เท่านั้น):

![image info](./pictures/image.png)

ทางออกที่ดีที่สุดคือการระบุเส้นทางที่สัมพันธ์กับโฟลเดอร์ที่เอกสาร md ตั้งอยู่

เบราว์เซอร์อาจมีปัญหาเมื่อพยายามแก้ไขเส้นทางสัมบูรณ์ของไฟล์ในเครื่อง ซึ่งสามารถแก้ไขได้โดยการเข้าถึงไฟล์ผ่านเว็บเซิร์ฟเวอร์ แต่ถึงแม้ในสถานการณ์นั้นเส้นทางของรูปภาพจะต้องถูก

การมีโฟลเดอร์ในระดับเดียวกันของเอกสารซึ่งมีรูปภาพทั้งหมดเป็นวิธีที่สะอาดและปลอดภัยที่สุด มันจะโหลดบน GitHub, local, local webserver

images_folder/img.jpg  < works


/images_folder/img.jpg  < this will work on webserver's only (please read the note!)

เมื่อใช้เส้นทางสัมบูรณ์รูปภาพจะสามารถเข้าถึงได้ด้วย url เช่นนี้เท่านั้น: http: //hostname.doesntmatter/image_folder/img.jpg

เป็นขั้นเป็นตอน :

1. สร้างไดเร็กทอรีชื่อเช่นรูปภาพและใส่รูปภาพทั้งหมดที่จะแสดงโดย Markdown

2. ยกตัวอย่างเช่นใส่example.pngเข้าไปในรูปภาพ

3. ในการโหลดexample.pngที่อยู่ภายใต้ ไดเร็กทอรีรูปภาพก่อนหน้านี้

![title](Images/example1.png)

หมายเหตุ : ไดเร็กทอรีรูปภาพต้องอยู่ภายใต้ไดเร็กทอรีเดียวกันของไฟล์ข้อความ markdown ของคุณซึ่งมี.mdนามสกุล

ในการเพิ่มรูปภาพในไฟล์ markdown ไฟล์. md และรูปภาพควรอยู่ในไดเร็กทอรีเดียวกัน ในกรณีของฉันไฟล์. md ของฉันอยู่ในโฟลเดอร์ doc ดังนั้นฉันจึงย้ายรูปภาพไปไว้ในโฟลเดอร์เดียวกัน หลังจากนั้นเขียนไวยากรณ์ต่อไปนี้ในไฟล์. md

![alt text](filename)

ชอบ ![Car Image](car.png)

สิ่งนี้ได้ผลสำหรับฉัน

การเพิ่มภาพในพื้นที่ได้ผลสำหรับฉันโดย: ![alt text](file://IMG_20181123_115829.jpg)

หากไม่มีfile://คำนำหน้าก็ใช้งานไม่ได้ (Win10, Notepad ++ พร้อม MarkdownViewer ++ addon)

แก้ไข: ฉันพบว่ามันใช้งานได้กับแท็ก html ด้วยและนั่นเป็นวิธีที่ดีกว่า: <img src="file://IMG_20181123_115829.jpg" alt="alt text" width="200"/>

Edit2: ในโปรแกรมแก้ไข Atom จะใช้งานได้โดยไม่มีfile://คำนำหน้าเท่านั้น เป็นอะไรที่วุ่นวาย

ตามความรู้ของฉันสำหรับ VSCode บน Linux โดยปกติแล้วภาพในเครื่องจะสามารถแสดงได้เฉพาะเมื่อคุณใส่ภาพลงในโฟลเดอร์เดียวกันกับ.mdไฟล์โพสต์ของคุณ
กล่าวคือเท่านั้น![](image.jpg)หรือ![](./image.jpg)จะทำงาน
แม้แต่เส้นทางที่แน่นอนเช่น![](/home/bala/image.jpg)ยังใช้ไม่ได้

แก้ไข:

ทำงานให้ฉัน (สำหรับภาพในพื้นที่)

![system schema](doc/systemDiagram.jpg)

 tree
 ├── doc
     └── jobsSystemSchema.jpg
 ├── README.md

ไฟล์ markdown README.md อยู่ในระดับเดียวกับไดเร็กทอรี doc

ในกรณีของคุณไฟล์ markdown ของคุณควรอยู่ในระดับเดียวกับไฟล์ไดเร็กทอรี

ทำงานให้ฉัน (URL ที่สมบูรณ์พร้อมเส้นทางดิบ)

![system schema](https://server/group/jobs/raw/master/doc/systemDiagram.jpg)

ไม่ทำงานสำหรับฉัน (url ที่มีเส้นทางหยด)

![system schema](https://server/group/jobs/blob/master/doc/systemDiagram.jpg)

ความเป็นไปได้สำหรับการไม่แสดงภาพท้องถิ่นก็คือเยื้องโดยไม่ได้ตั้งใจของการอ้างอิงภาพ - ![alt text](file)ช่องว่างก่อน

สิ่งนี้ทำให้เป็น 'code block' แทนที่จะเป็น 'image inclusion' เพียงแค่ลบช่องว่างนำหน้า

ฉันมีปัญหากับการแทรกรูปภาพใน R Markdown ถ้าฉันใช้ URL ทั้งหมดC:/Users/Me/Desktop/Project/images/image.pngมันมีแนวโน้มที่จะได้ผล มิฉะนั้นฉันต้องใส่ markdown ในไดเร็กทอรีเดียวกันกับรูปภาพหรือในไดเร็กทอรีบรรพบุรุษ ดูเหมือนว่าไดเร็กทอรีการถักที่ประกาศไว้จะถูกละเว้นเมื่ออ้างอิงรูปภาพ

ขึ้นอยู่กับเครื่องมือของคุณคุณยังสามารถฉีด HTML ลงใน markdown ได้

<img src="./img/Isolated.png">

สิ่งนี้ถือว่าโครงสร้างโฟลเดอร์ของคุณคือ:

 ├── img
     └── Isolated.jpg
 ├── README.md

ใส่รูปภาพในโฟลเดอร์เดียวกับไฟล์ markdown หรือใช้เส้นทางสัมพัทธ์ไปยังรูปภาพ

เพียงแค่คัดลอกภาพแล้ววางคุณจะได้ผลลัพธ์

![image.png](attachment:image.png)

ในJupyter Notebook Markdownคุณสามารถใช้ไฟล์

<img src="RelPathofFolder/File" style="width:800px;height:300px;">

ไม่ต้องตั้งค่าเว็บเซิร์ฟเวอร์

ฉันพยายามอัปโหลดภาพในเครื่องของฉันในส่วนความคิดเห็นของส่วนสำคัญและเพียงแค่คัดลอกและวาง URL ที่สร้างขึ้น ทำงานให้ฉัน😊

ฉันมีทางออก:

ก) ตัวอย่างอินเทอร์เน็ต:

![image info e.g. Alt](URL Internet to Images.jpg "Image Description")

b) ตัวอย่างรูปภาพในเครื่อง:

![image Info](file:///<Path to your File><image>.jpg "Image Description")
![image Info](file:///C:/Users/<name>/Pictures/<image>.jpg "Image Description")

TurboByte