2010-05-11 14 views
31

मैं एक खाली "file.html" में एक .png फ़ाइल कैसे एम्बेड ताकि जब आप किसी भी ब्राउज़र में है कि फ़ाइल को खोलने आप उस छवि को देख सकते हैं? इस परिदृश्य में छवि फ़ाइल HTML से जुड़ी नहीं है बल्कि छवि डेटा HTML में ही एम्बेड किया गया है।क्या मैं एक .png छवि को HTML पृष्ठ में एम्बेड कर सकता हूं?

उत्तर

42

कुछ बेस 64 एनकोडर इसमें सहायता करने के लिए ऑनलाइन कर रहे हैं, यह शायद सबसे अच्छा देखा है मैं है:

http://www.greywyvern.com/code/php/binary2base64

कि पेज के रूप में पता चलता है इस के लिए अपने मुख्य विकल्प सीएसएस हैं:

div.image { 
    width:100px; 
    height:100px; 
    background-image:url(data:image/png;base64,iVBORwA<MoreBase64SringHere>); 
} 

या <img> टैग से, इस तरह:

<img alt="My Image" src="data:image/png;base64,iVBORwA<MoreBase64SringHere>" /> 
+0

हालांकि आप वेबब्रोसर पर निर्भर हैं कि यह बेकार ढंग से काम करेगा या नहीं। – BalusC

+1

@ बालुससी - सच है, लेकिन यही सवाल पूछा गया है ... सामान्य बाहरी फ़ाइल मार्ग को छोड़कर कोई विकल्प नहीं। –

+0

यह यहाँ एक और वेबसाइट आप एक URL से अपने स्थानीय हार्ड ड्राइव से (के बजाय एक छवि फ़ाइल सांकेतिक शब्दों में बदलना दूँगा कि क्रोम में मेरे लिए काम करने के लिए ताज्जुब है कि बेस 64 डेटा गलत है प्रतीत होता है न .. :(:(.. – WORMSS

0

त्वरित गूगल खोज का कहना है आप इसे इस प्रकार एम्बेड कर सकते हैं:

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/ 
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp 
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" 
width="16" height="14" alt="embedded folder icon"> 

लेकिन अगर आप इंटरनेट एक्सप्लोरर में एक अलग कार्यान्वयन की जरूरत है।

http://www.websiteoptimization.com/speed/tweak/inline-images/

+1

ध्यान दें कि यह केवल छोटे छवियों के साथ काम करेंगे बड़ी छवि, बड़ा इनकोडिंग स्ट्रिंग मिल जाएगा, और की एक सीमा होती है कि कब तक 'src'। और इसके अलावा कि से हो सकता है, यह uggly imho :) – Alec

0

उपयोग mod_rewrite कॉल पुनर्निर्देशित करने के लिए यूआरएल उपयोगकर्ता

तुम सिर्फ file.html को image.png फ़ाइल का नाम बदलने का प्रयास किया है के लिए बदले बिना image.png को file.html के लिए? मैं फाइल एक्सटेंशन पर सबसे ब्राउज़र ले माइम हैडर लगता है :)

+0

है मैं जानता हूँ कि फ़ायरफ़ॉक्स करता है, आईई फ़ाइल स्वयं को देखने जाएगा। – Rangoric

+1

क्या होगा यदि आप अपाचे का उपयोग नहीं कर रहे हैं? आप किसी भी उपयोग नहीं कर रहे है, तो क्या वेब सर्वर बिल्कुल (जैसे एचटीएमएल ईमेल)? –

9

64base पद्धति के रूप में अच्छी तरह से बड़ी छवियों के लिए काम करता है, मुझे लगता है कि विधि का उपयोग अपनी वेबसाइट में सभी छवियों को एम्बेड करने के लिए, और यह हर बार काम करता है। मैंने 2 एमबी आकार, जेपीजी और पीएनजी तक फ़ाइलों के साथ किया है।

3

मैं कब तक इस पोस्ट यहाँ किया गया है के लिए पता नहीं है। लेकिन मैं अब इसी तरह की समस्या पर ठोकर खाई। इसलिए समाधान पोस्ट करना ताकि यह दूसरों की मदद कर सके।

#!/usr/bin/env perl 
use strict; 
use warnings; 
use utf8; 

use GD::Graph::pie; 
use MIME::Base64; 
my @data = (['A','O','S','I'],[3,16,12,47]); 

my $mygraph = GD::Graph::pie->new(200, 200); 
my $myimage = $mygraph->plot(\@data)->png; 

print <<end_html; 
<html><head><title>Current Stats</title></head> 
<body> 
<p align="center"> 
<img src="data:image/png;base64, 
end_html 

print encode_base64($myimage); 

print <<end_html; 
" style="width: 888px; height: 598px; border-width: 2px; border-style: solid;" /></p> 
</body> 
</html> 

end_html 
संबंधित मुद्दे