วิธีการแสดงภาพท้องถิ่นใน Chrome โดยใช้ไฟล์: // โปรโตคอล?

23

ฉันต้องการระบุพา ธ ของไฟล์ในเครื่องสำหรับภาพบนหน้าเว็บที่ส่งผ่าน http โดยใช้ Chrome - เป็นไปได้หรือไม่

ฉันจำได้ว่าทำสิ่งนี้โดยใช้ IE แต่จำไม่ได้! การตั้งค่าที่เชื่อถือได้บางอย่างฉันคิดว่า ...

google-chrome url pictures

14

คุณสามารถแปลงภาพให้เป็นรหัสเบส - 64 เช่นด้วย " http://duri.me/ " และคัดลอกผลลัพธ์ไปยังเบราว์เซอร์! ชอบ:

<img width='16' height='16'  src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAApklEQVQ4jWP8//8/Ay5Q4s6GU7Jn5y9GBgYGBiacuokELKTYSpQByKB68UkMMUExQ0ZkPsVeYEQPREZGRpK8gOGCdy/PwTEyH8ZGF8MbBgwMDAxC4kZ4xfAaALMFGfz//5+6gYjXBS+fXUHhaxjEMqKrQXGBglU8SgyIS+mgYHR5DAPIAYz////HavL5DQVwtmHABAyND44tZGRgwBMG2DRhAxR7AQBhgT3yD6eBRwAAAABJRU5ErkJggg=='>

— Diogo Cid
แหล่งที่มา

7

ข้อมูลนี้อาจมีประโยชน์กับบางคน แต่ฉันคิดว่ามันไม่ได้ตอบคำถามนี้จริงๆ

— G-Man กล่าวว่า 'Reinstate Monica'

12

เมื่อคุณพูดถึง 'Chrome' คุณสามารถใช้ส่วนขยายของ Chrome เพื่อทำสิ่งนี้เพื่อเปิดใช้งานการเข้าถึงไฟล์ของคุณ

ทำตามขั้นตอนเหล่านี้:

1) ในโฟลเดอร์ท้องถิ่นที่มีภาพของคุณอยู่ให้สร้างไฟล์นี้ชื่อว่า 'manifest.json' และป้อนสิ่งนี้:

{
  "name": "File Exposer",
  "manifest_version": 2,
  "version": "1.0",
  "web_accessible_resources": ["*.jpg","*.JPG"]
}

2) ใส่แถบนี้เป็นแถบที่อยู่ของ chrome: chrome: // extensions /

3) ตรวจสอบให้แน่ใจว่าได้เลือก 'โหมดนักพัฒนาซอฟต์แวร์' (ด้านบนขวาของหน้า)

4) คลิกปุ่ม 'โหลดส่วนขยายที่แกะกล่อง'

5) นำทางไปยังโฟลเดอร์ท้องถิ่นที่มีรูปภาพและไฟล์ manifest.json อยู่ให้คลิกตกลง

6) ส่วนขยาย 'File Exposer' ควรจะอยู่ในรายการในรายการและมีเครื่องหมายถูกกับ 'Enabled' หากโฟลเดอร์อยู่ในไดรฟ์เครือข่ายหรือไดรฟ์ช้าอื่น ๆ หรือมีไฟล์จำนวนมากอาจใช้เวลา 10-20 วินาทีหรือมากกว่านั้นในการแสดงรายการ

7) สังเกตสตริง 'ID' ที่เชื่อมโยงกับส่วนขยายของคุณ นี่คือ EXTENSION_ID

8) ใน HTML ของคุณคุณสามารถเข้าถึงไฟล์ดังต่อไปนี้เปลี่ยน 'EXTERNSION_ID' เป็น ID ส่วนขยายที่คุณสร้างขึ้น:

<img src='chrome-extension://EXTENSION_ID/example1.jpg'>

โปรดทราบว่า * .jpg จะเรียกซ้ำและมันจะจับคู่ไฟล์ในโฟลเดอร์ที่ระบุและโฟลเดอร์ย่อยทั้งหมดโดยอัตโนมัติคุณไม่จำเป็นต้องระบุสำหรับแต่ละโฟลเดอร์ย่อย นอกจากนี้ยังทราบว่า Case Sensitive

ในแท็ก 'img' คุณไม่ได้ระบุโฟลเดอร์ดั้งเดิมมันสัมพันธ์กับจากโฟลเดอร์นั้นดังนั้นจึงจำเป็นต้องระบุเฉพาะโฟลเดอร์ย่อย

หากคุณแก้ไขไฟล์ manifest.json คุณจะต้องคลิกลิงก์ 'Reload (Ctrl + R)' ถัดจากส่วนขยาย

— Rob Donovan
แหล่งที่มา

8

หน้าเว็บที่ไม่ใช่ในท้องถิ่นไม่สามารถเข้าถึงไฟล์ในตัวเครื่องใน Chrome หรือเว็บเบราว์เซอร์ที่ทันสมัย

คุณสามารถลบล้างสิ่งนี้ได้โดยใช้LocalLinks ( สำหรับ Firefox ) แต่จะใช้ได้เฉพาะในเครื่องของคุณเท่านั้น

— grawity
แหล่งที่มา

2

จะไม่ทำงานกับรูปภาพ

— Willem D'Haeseleer

ฉันคิดว่าโครเมี่ยมเป็นใบ้ฉันพยายามบนabout:blankหน้าเว็บและไม่อนุญาตให้เปิดฉันเบื่อที่จะเปิดไฟล์ HTML ในตัวเครื่องและใช้งานได้แม้จะเป็นภาพที่ @ WillemD'Haeseleer พูด รหัสของฉันคือ:drawing = new Image(); drawing.src = "C:/Users/S/Videos/net.png";

— Shayan

2

ใน Chrome นี่เป็นแบบนี้

file:///C:/sample.txt

— KutscheraIT
แหล่งที่มา

ฉันกำลังทำสิ่งนี้อยู่บนเว็บ แต่กำลังดูไฟล์ในตัวผู้ใช้ของผู้ใช้ .... <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" " w3.org/TR /xhtml1/DTD/xhtml1-strict.dtd "> <html xmlns =" w3.org/1999/xhtml "> <head> <meta http-equiv =" เนื้อหาประเภท "เนื้อหา =" ข้อความ / html; charset = utf -8 "/> <title> ตัวอย่าง </title> </head> <body> <img src =" ไฟล์: /// c: /graphics/image.jpg "height =" 200px "width =" 200px "/ > <h1> ยินดีต้อนรับ </h1> <p> สวัสดีชาวโลก! </p> </body> </html>

— JSH

1

ฉันเพิ่งลองไฟล์. html และ. jpg ด้วยไฟล์: /// สัญกรณ์ทั้งคู่แสดงผลได้อย่างถูกต้อง คุณสามารถโพสต์ภาพหน้าจอที่แสดงแถบที่อยู่และเนื้อหาบางส่วนได้หรือไม่

— KutscheraIT

ลองjsh.learningict.net - เห็นได้ชัดว่าภาพที่คุณไม่มี แต่รหัสแสดงให้คุณเห็นความคิดของฉันหลังจาก

— JSH

ฉันเดาได้แค่ว่าคุณกำลังอ้างถึงแท็กรูปภาพซึ่งทำงานได้ดีเมื่อฉันแทนที่ src ด้วย <img src = "file: /// c: \ test.jpg" height = "200px" width = "200px" > c: \ test.jpg เป็น jpg ที่ถูกต้องในพา ธ นั้นและแสดงผลได้ดี

— KutscheraIT

สงสัยว่ามันเป็นสิ่งที่ osx แล้ว? การอ้างอิง src ทำงานได้ดีเพียงอย่างเดียวในแถบที่อยู่ของ Chrome แต่ไม่ได้อยู่ในโค้ด HTML

— JSH

2

หากคุณต้องการทดสอบภาพโลคัลบนไซต์สดคุณสามารถเรียกใช้เว็บเซิร์ฟเวอร์ในท้องถิ่นและตั้ง URL เช่นhttp://127.0.0.1:8123/img.jpgหน้าเว็บโดยใช้ DevTools

มีวิธีต่าง ๆ ในการเรียกใช้เว็บเซิร์ฟเวอร์: 1. ส่วนขยายสำหรับเบราว์เซอร์ "เว็บเซิร์ฟเวอร์สำหรับ Chrome" ด้วยโฟลเดอร์ที่กำหนด https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigbb

ถ้าคุณมีไพ ธ อนให้เรียกใช้เซิร์ฟเวอร์ httpแบบฝังที่โฟลเดอร์ที่เลือก

python3 -m http.server 8123 # python 3 เวอร์ชั่น
python -m SimpleHTTPServer 8123 # python 2 เวอร์ชั่น
ใช้เซิร์ฟเวอร์พร้อมใช้งานจริงเช่นnginx , apache

— koxt
แหล่งที่มา

0

ในกรณีของฉันฉันแค่ต้องการดูว่าการเปลี่ยนแปลงภาพขนาดเล็กเพียงใดจะมีลักษณะเป็นขนาดตอบสนองที่แตกต่างกัน มันง่ายที่สุดในการบันทึกเป็น ... หน้าเว็บที่สมบูรณ์ไปยังเดสก์ท็อปแล้วเปิดแทน ฉันตรวจสอบและแก้ไขภาพ src

— changokun
แหล่งที่มา

ดูเหมือนจะไม่เป็นสิ่งที่ OP ร้องขอ แต่ก็ไม่เกี่ยวข้อง โปรดอ่านคำถามอย่างระมัดระวังและอย่าตอบหรือแสดงความคิดเห็นจนกว่าคุณจะมีข้อมูลที่เกี่ยวข้องที่จะเพิ่ม

— music2myear

1

แต่มันคือสิ่งที่ฉันกำลังมองหา

— ซามูเอลทอมป์สัน

-1

ตกลงคุณไม่สามารถปล่อยให้คนอื่นเข้าใช้ระบบไฟล์โลคอลของคุณได้! คุณจะต้องใช้บริการเซิร์ฟเวอร์เช่น Apache ปล่อยให้คอมพิวเตอร์ของคุณทำงานตลอด 24 ชั่วโมงตรวจสอบให้แน่ใจว่าเครื่องไม่ร้อนเกินไปดูแลความปลอดภัยที่ดีและอื่น ๆ อีกมากเพื่อให้เป็นไปได้ และเนื่องจากการดูแลเซิร์ฟเวอร์มีราคาแพงและใช้เวลานานคนส่วนใหญ่จึงให้โฮสต์ของโปรให้เรา (เว็บโฮสติ้ง)

โดยสรุปหากคุณไม่ต้องการเรียกใช้เซิร์ฟเวอร์ของคุณเองจะง่ายกว่ามากเพียงแค่อัปโหลดไปยังเว็บโฮสติ้งที่คุณเลือก

— user759576
แหล่งที่มา

2

คำถามไม่ได้เกี่ยวกับการให้อินเทอร์เน็ตที่เข้าถึงไฟล์ขนาดใหญ่ในระบบท้องถิ่น

— xenoid