หากรูปภาพที่เข้ารหัส base64 ไม่สามารถแสดงในองค์ประกอบ img ของ HTML อาจมีสาเหตุหลายประการ:
1. ข้อผิดพลาดทางไวยากรณ์: แอตทริบิวต์ src ในองค์ประกอบ img ต้องขึ้นต้นด้วย "data:" ตามด้วยประเภท MIME และข้อมูลรูปภาพที่เข้ารหัส base64 หากรูปแบบไวยากรณ์นี้ไม่ถูกต้อง รูปภาพจะไม่สามารถแสดงได้ตามปกติ
2. ข้อผิดพลาดประเภท MIME: หากประเภท MIME ที่ระบุไม่ตรงกับรูปแบบภาพจริง รูปภาพจะไม่แสดง คุณสามารถใช้เครื่องมือตรวจจับประเภท MIME เพื่อตรวจจับประเภท MIME ที่ถูกต้องของรูปภาพได้
3. ข้อผิดพลาดของข้อมูลภาพ: ข้อมูลภาพที่เข้ารหัส base64 อาจเสียหายหรือไม่สมบูรณ์ ทำให้ไม่สามารถถอดรหัสและแสดงภาพได้ตามปกติ คุณสามารถลองสร้างข้อมูลที่เข้ารหัส base64 ของรูปภาพใหม่ได้
3.1 หาก มีการขึ้นบรรทัดใหม่ในการเข้ารหัส base64 ของรูปภาพ องค์ประกอบ HTML img อาจแสดงไม่ถูกต้อง วิธีแก้ไขปัญหานี้คือการลบบรรทัดใหม่ในการเข้ารหัส base64
ในระหว่างกระบวนการเข้ารหัส base64 ตัวเข้ารหัสบางตัวจะเพิ่มอักขระขึ้นบรรทัดใหม่ที่ท้ายแต่ละบรรทัดเพื่ออำนวยความสะดวกในการส่งออกสตริงที่เข้ารหัส base64 แบบยาว อย่างไรก็ตาม เมื่อใช้รูปภาพที่เข้ารหัส base64 ใน HTML หากมีการขึ้นบรรทัดใหม่ในการเข้ารหัส base64 เบราว์เซอร์จะไม่สามารถถอดรหัสและแสดงรูปภาพได้อย่างถูกต้อง
เพื่อแก้ไขปัญหานี้ คุณสามารถใช้ JavaScript เพื่อลบการขึ้นบรรทัดใหม่ในการเข้ารหัส base64 จากนั้นกำหนดการเข้ารหัส base64 ที่แก้ไขแล้วให้กับแอตทริบิวต์ src ขององค์ประกอบ img รหัสตัวอย่างมีดังนี้:
var base64Str = "data:image/png;base64,iVBORw0KGg..."; // การเข้ารหัส Base64 พร้อมตัวแบ่งบรรทัด var img = รูปภาพใหม่();
img.onload = ฟังก์ชั่น () {
document.body.appendChild (img);
-
img.src = base64Str.replace(/s/g, ""); // ลบช่องว่างและการขึ้นบรรทัดใหม่ทั้งหมด โค้ดด้านบนจะสร้างองค์ประกอบ img และกำหนดการเข้ารหัส base64 ที่แก้ไขแล้วให้กับแอตทริบิวต์ src ใช้นิพจน์ทั่วไป /s/g เพื่อลบช่องว่างและการขึ้นบรรทัดใหม่ทั้งหมดเพื่อให้แน่ใจว่ามีการเข้ารหัส base64 โดยไม่มีอักขระเพิ่มเติม สุดท้าย เพียงเพิ่มองค์ประกอบ img ลงในเอกสาร
4. ปัญหาขนาดรูปภาพ: หากรูปภาพที่เข้ารหัส base64 มีขนาดใหญ่เกินไป เบราว์เซอร์อาจไม่สามารถโหลดและแสดงรูปภาพได้ตามปกติ คุณสามารถลองลดขนาดของรูปภาพหรือบีบอัดรูปภาพเพื่อลดขนาดรูปภาพได้
5. ปัญหานโยบายความปลอดภัย: เบราว์เซอร์บางตัวอาจป้องกันการโหลดอิมเมจที่เข้ารหัส base64 เนื่องจากนโยบายความปลอดภัย คุณสามารถลองใช้วิธีการโหลดรูปภาพอื่นๆ ได้ เช่น การอัพโหลดรูปภาพไปยังเซิร์ฟเวอร์ และใช้การอ้างอิง URL
6. ปัญหาแคช: บางครั้งเบราว์เซอร์จะแคชรูปภาพที่หมดอายุหรือเสียหาย ทำให้รูปภาพแสดงไม่ถูกต้อง คุณสามารถลองล้างแคชของเบราว์เซอร์หรือใช้โหมดการเรียกดูแบบส่วนตัวเพื่อโหลดรูปภาพ
7. ปัญหาข้ามโดเมน: หากข้อมูลรูปภาพที่เข้ารหัส base64 ถูกโหลดจากชื่อโดเมนหรือโปรโตคอลอื่น อาจอยู่ภายใต้ข้อจำกัดข้ามโดเมนโดยเบราว์เซอร์และไม่สามารถแสดงได้ตามปกติ คุณสามารถลองฝังข้อมูลรูปภาพลงในหน้า HTML หรือโหลดรูปภาพโดยใช้ชื่อโดเมนหรือโปรโตคอลเดียวกัน
8. ปัญหาการส่งผ่านเครือข่าย: ในระหว่างการส่งผ่านเครือข่าย หากข้อมูลภาพที่เข้ารหัส base64 สูญหาย เสียหาย หรือถูกแก้ไข รูปภาพจะไม่แสดงตามปกติ คุณสามารถลองใช้โปรโตคอล HTTPS เพื่อส่งข้อมูลภาพเพื่อให้มั่นใจในความปลอดภัยและความสมบูรณ์ของข้อมูล
9. วิธีการเข้ารหัสที่ไม่สอดคล้องกัน: หากวิธีการเข้ารหัสที่ใช้ไม่สอดคล้องกัน รูปภาพจะไม่แสดงอย่างถูกต้อง ตัวอย่างเช่น หากหน้า HTML ที่เข้ารหัส UTF-8 มีข้อมูลรูปภาพที่เข้ารหัส base64 ที่เข้ารหัส GBK รูปภาพจะไม่ถูกถอดรหัสและแสดงอย่างถูกต้อง คุณสามารถลองใช้การเข้ารหัสเดียวกันเพื่อหลีกเลี่ยงปัญหานี้
ข้างต้นคือการวิเคราะห์โดยละเอียดถึงสาเหตุที่องค์ประกอบ HTML img ไม่สามารถแสดงรูปภาพ base64 ได้ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ img HTML ไม่สามารถแสดงรูปภาพ base64 ได้ โปรดอ่านบทความอื่นๆ ที่เกี่ยวข้องใน downcodes.com!