UIWebView के भीतर HTML और स्थानीय छवियों का उपयोग करना


164

मेरे पास मेरे ऐप में UIWebView है जो मैं एक छवि प्रदर्शित करने के लिए उपयोग करना चाहता हूं जो किसी अन्य यूआरएल से लिंक होगा।

मैं उपयोग कर रहा हूँ

<img src="image.jpg" /> to load the image.

समस्या यह है कि छवि लोड नहीं होती है (अर्थात यह नहीं पाया जा सकता है) भले ही यह मेरी परियोजना में एक संसाधन के रूप में जोड़ा गया है और बंडल में कॉपी किया गया है।

मैंने NSBundle का उपयोग करके छवि का पूर्ण पथ प्राप्त करने और उसका उपयोग करने का प्रयास किया है और यह अभी भी वेब दृश्य में दिखाई नहीं देता है।

कोई विचार?


मैं अब iPhone OS 3.0 के रूप में ऐसा करने में सक्षम नहीं हूं। :( अधिक जानकारी (StackOverflow.com)।
जो

8
क्यों गिरा वोट? : /
जसरीन

5
यह जरूरी नहीं कि वे दुष्ट हों। शायद उनके पास कोई वैध कारण था? हम शायद कभी नहीं जान पाएंगे। अगर केवल वे ही यह बताने के लिए शिष्टाचार रखते कि वे एक टिप्पणी में मतदान क्यों करते हैं ...
जसारीन

63
वोट डाउन पर टिप्पणी लिखना अनिवार्य होना चाहिए।
रॉबर्ट

@ जसारिएन: मुझे समान कार्यक्षमता की आवश्यकता है। लेकिन मुझे समझ में नहीं आ रहा है कि HTMLString में क्या पास होना चाहिए [webView loadHTMLString: htmlString baseURL: baseURL] और मैं कैसे <img src = "image.jpg" /> HTML में अपनी छवि डालता हूँ।
iPhone

जवाबों:


291

रिश्तेदार पथ या फ़ाइल का उपयोग करना: छवियों को संदर्भित करने के लिए पथ UIWebView के साथ काम नहीं करता है। इसके बजाय आपको HTML को सही आधार के साथ दृश्य में लोड करना होगा:

NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];
[webView loadHTMLString:htmlString baseURL:baseURL];

आप अपनी छवियों को इस तरह संदर्भित कर सकते हैं:

<img src="myimage.png">

( uiwebview से दोबारा पूछा )


15
[[NSBundle mainBundle] bundleURL] हम इसे बंडल के रूप में उपयोग कर सकते हैं
नवीन शान

2
यह सब मेरे लिए करता है मुझे अपने वेबव्यू में एक स्ट्रिंग देता है जिसे मैंने अपने htmlString के लिए परिभाषित किया है। पृष्ठ पर दिखाए जाने वाले सभी अर्थ "
Tour.html

एक सिडेनोट के रूप में, यदि आप छवियों के विपरीत जावास्क्रिप्ट फ़ाइलों को लोड करने का प्रयास कर रहे हैं, तो आपको इसे भी देखना होगा: stackoverflow.com/a/3629479/385619
विलस्टर

Xamarin के विज्ञापन के मामले में MonoTouch webvie.LoadHtmlString (स्ट्रिग, NSBundle.MainBundle.BundleUrl);
एरिक सिमोनिक

1
सिम्युलेटर में सही काम करें, लेकिन मेरे डिवाइस में नहीं
jose920405

46

इसे इस्तेमाल करो:

[webView loadHTMLString:htmlString baseURL:[[NSBundle mainBundle] bundleURL]];

5
लेकिन आपका उत्तर 3 साल पहले पोस्ट किए गए उत्तर के समान है ... आपका उत्तर कुछ भी अलग नहीं देता है, इसे पोस्ट करने की आवश्यकता नहीं है क्योंकि स्वीकृत उत्तर पहले से ही आपके द्वारा पोस्ट किए गए कवर को कवर करता है।
जसारेन

13
यह स्वीकृत उत्तर का एक सुविधाजनक एक लाइन संस्करण है - यहाँ होने से कोई नुकसान नहीं हुआ।
मुशीनेसिस

9
@Jasarien कि एडम अलेक्जेंडर द्वारा जवाब अगस्त 2009 तक एकमात्र समाधान था। लेकिन मैक्स ओएस एक्स संस्करण 10.6 से यह नई संपत्ति bundleURLNSBundle में जोड़ी गई थी। बंडलप्ले करने और URL में परिवर्तित करने की आवश्यकता नहीं है। इसलिए 10.6 से अधिक संस्करणों में काम करने वाले लोगों के लिए यह एक बेहतर समाधान है।
रिनीज

इस पोस्ट में हाल ही में बहुत-सी गतिविधि देखकर..और किसी ने नोट नहीं किया कि यह क्यों है?
लिथु टीवी

24

मैं बस इस समस्या में भाग गया। मेरे मामले में, मैं कुछ छवियों के साथ काम कर रहा था जो स्थानीय नहीं थीं और अन्य जो कि थीं - कई भाषाओं में। एक आधार URL को मेरे लिए स्थानीयकृत फ़ोल्डर के अंदर की छवियां नहीं मिलीं। मैंने निम्न कार्य करके इसे हल किया:

// make sure you have the image name and extension (for demo purposes, I'm using "myImage" and "png" for the file "myImage.png", which may or may not be localized)
NSString *imageFileName = @"myImage";
NSString *imageFileExtension = @"png";

// load the path of the image in the main bundle (this gets the full local path to the image you need, including if it is localized and if you have a @2x version)
NSString *imagePath = [[NSBundle mainBundle] pathForResource:imageFileName ofType:imageFileExtension];

// generate the html tag for the image (don't forget to use file:// for local paths)
NSString *imgHTMLTag = [NSString stringWithFormat:@"<img src=\"file://%@\" />", imagePath];

जब आप सामग्री लोड करते हैं, तब अपने UIWebView HTML कोड में imgHTMLTag का उपयोग करें।

मुझे उम्मीद है कि यह किसी को भी, जो एक ही समस्या में भाग गया मदद करता है।


1
का उपयोग करना file://जो मुझे चाहिए था।
सो ओवर इट

अच्छा है, वास्तव में मुझे क्या चाहिए
रबरडक

8

बेस 64 इमेज स्ट्रिंग का उपयोग करने का प्रयास करें।

NSData* data = UIImageJPEGRepresentation(image, 1.0f);

NSString *strEncoded = [data base64Encoding];   

<img src='data:image/png;base64,%@ '/>,strEncoded

6

मुझे एक सिमिलर समस्या थी, लेकिन सभी सुझावों से मदद नहीं मिली।

हालाँकि, समस्या * .png ही थी। इसका कोई अल्फा चैनल नहीं था । किसी तरह Xcode तैनाती प्रक्रिया के दौरान अल्फा चैनल के बिना सभी png फ़ाइलों को अनदेखा करता है।


इससे बाहर निकलने के लिए आपने क्या किया? क्या आपको कोई समाधान मिला? मैं उसी मुद्दे का सामना कर रहा हूं। UIWebView चित्र नहीं दिखा रहा है क्योंकि इसमें कोई अल्फा चैनल नहीं था।
१२:०३ पर स्पेलजा

1
मैंने अपनी png फ़ाइलों में एक अल्फा चैनल जोड़ने के लिए जिम्प का उपयोग किया। देखें docs.gimp.org/en/gimp-layer-alpha-add.html

3

आप "MyProj" में फ़ाइलें जोड़ें और फ़ोल्डर बनाएँ संदर्भ का चयन करके अपनी परियोजना के लिए उप फ़ोल्डर के साथ वेब, (सब फ़ोल्डर्स सीएसएस, आईएमजी और जेएस और फ़ाइल test.html के साथ WEB कहते हैं) जोड़ सकते हैं । अब निम्नलिखित कोड सभी संदर्भित छवियों, सीएसएस और जावास्क्रिप्ट के बारे में ध्यान रखेगा

NSString *filePath = [[NSBundle mainBundle] pathForResource:@"WEB/test.html" ofType:nil];
[webView  loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:filePath]]];

3

स्विफ्ट 3 में:

webView.loadHTMLString("<img src=\"myImg.jpg\">", baseURL: Bundle.main.bundleURL)

यह मेरे लिए तब भी काम आया जब छवि बिना किसी संशोधन के एक फ़ोल्डर के अंदर थी।


2

IOS 6 प्रोग्रामिंग कुकबॉक में कुछ चैप्टर पढ़ने के बाद और ऑब्जेक्टिव-सी और iOS प्रोग्रामिंग सीखना शुरू किया, मैं सिर्फ इतना जोड़ना चाहूंगा, कि अगर कोई कस्टम बंडल से संसाधनों को लोड करने जा रहा है और वेब दृश्य में उसका उपयोग कर रहा है , यह इस तरह पूरा किया जा सकता है:

NSString *resourcesBundlePath = [[NSBundle mainBundle] pathForResource:@"Resources" ofType:@"bundle"];
NSBundle *resourcesBundle = [NSBundle bundleWithPath:resourcesBundlePath];
[self.outletWebView loadHTMLString:[html description] baseURL:[resourcesBundle bundleURL]];

फिर, अपने html में आप "कस्टम" बंडल का उपयोग करके अपने आधार पथ के रूप में संसाधन का उल्लेख कर सकते हैं:

body {
    background-image:url('img/myBg.png');
}


1

एडम अलेक्जेंडर्स के स्विफ्ट संस्करण का उद्देश्य सी उत्तर:

let logoImageURL = NSURL(fileURLWithPath: "\(Bundle.main.bundlePath)/PDF_HeaderImage.png")

0

यदि आप छवियों के सापेक्ष लिंक का उपयोग करते हैं तो चित्र प्रदर्शित नहीं होंगे क्योंकि सभी फ़ोल्डर संरचनाएँ आईओएस ऐप संकलित होने के बाद संरक्षित नहीं हैं। आप क्या कर सकते हैं अपने स्थानीय वेब फ़ोल्डर को ' .bundle ' जोड़कर एक बंडल में परिवर्तित करें ' फ़ाइल नाम एक्सटेंशन ।

इसलिए यदि आप स्थानीय वेबसाइट " www " फ़ोल्डर में समाहित हैं , तो इसे " www.bundle " नाम दिया जाना चाहिए । यह छवि फ़ोल्डर और निर्देशिका संरचना को संरक्षित करने की अनुमति देता है। फिर WebView में ' index.html ' फ़ाइल को एक HTML स्ट्रिंग के रूप में ' baseURL ' (www.bundle पथ पर सेट करें) के साथ लोड करें ताकि आप संबंधित छवि लिंक लोड कर सकें।

NSString *mainBundlePath = [[NSBundle mainBundle] resourcePath];
NSString *wwwBundlePath = [mainBundlePath stringByAppendingPathComponent:@"www.bundle"];
NSBundle *wwwBundle = [NSBundle bundleWithPath:wwwBundlePath];
if (wwwBundle != nil) {
    NSURL *baseURL = [NSURL fileURLWithPath:[wwwBundle bundlePath]];
    NSError *error = nil;
    NSString *page = [[NSBundle mainBundle] pathForResource:@"index.html" ofType:nil];
    NSString *pageSource = [NSString stringWithContentsOfFile:page encoding:NSUTF8StringEncoding error:&error];
    [self.webView loadHTMLString:pageSource baseURL:baseURL];
}

0

इन उत्तरों ने मेरी मदद की - विशेष रूप से फ़ाइल: \\ xxxxxxx.xxx, लेकिन मुझे छवि प्रदर्शित करने के लिए वर्कअराउंड करना पड़ा।

मेरे मामले में, मेरे पास अपने सर्वर पर एक HTML फ़ाइल है जिसे मैं दस्तावेज़ निर्देशिका में डाउनलोड करता हूं। मैं इसे UIWebView में एक स्थानीय ग्राफिक के साथ प्रदर्शित करना चाहता हूं, जो मुझे काम करने के लिए नहीं मिला। यहाँ मैंने क्या किया है:

  1. NSBundle से फ़ाइल को स्थानीय दस्तावेज़ निर्देशिका में कॉपी करें
  2. मेरे HTML दस्तावेज़ में फ़ाइल को "फ़ाइल: \\ filename.png" के रूप में संदर्भित करें

इसलिए स्टार्टअप में फ़ाइल को दस्तावेज़ निर्देशिका में कॉपी करें:

-(BOOL)copyBundleFilesToDocumentsDirectoryForFileName:(NSString *)fileNameToCopy OverwriteExisting:(BOOL)overwrite {
        //GET DOCUMENTS DIR
        //Search for standard documents using NSSearchPathForDirectoriesInDomains
        //First Param = Searching the documents directory
        //Second Param = Searching the Users directory and not the System
        //Expand any tildes and identify home directories.
        NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
        NSString *documentsDir = [paths objectAtIndex:0];

        //COPY FILE FROM NSBUNDLE File to Local Documents Dir
        NSString *writableFilePath = [documentsDir  stringByAppendingPathComponent:fileNameToCopy];

        NSFileManager *fileManager = [NSFileManager defaultManager];
        NSError *fileError;

        DDLogVerbose(@"File Copy From Bundle to Documents Dir would go to this path: %@", writableFilePath);

        if ([fileManager fileExistsAtPath:writableFilePath]) {
            DDLogVerbose(@"File %@ already exists in Documents Dir", fileNameToCopy);

            if (overwrite) {
                [fileManager removeItemAtPath:writableFilePath error:nil];
                DDLogVerbose(@"OLD File %@ was Deleted from  Documents Dir Successfully", fileNameToCopy);
            } else {
                return (NO);
            }
        }

        NSArray *fileNameParts = [fileNameToCopy componentsSeparatedByString:@"."];
        NSString *bundlePath = [[NSBundle mainBundle]pathForResource:[fileNameParts objectAtIndex:0] ofType:[fileNameParts objectAtIndex:1]];
        BOOL success = [fileManager copyItemAtPath:bundlePath toPath:writableFilePath error:&fileError];

        if (success) {
            DDLogVerbose(@"Copied %@ from Bundle to Documents Dir Successfully", fileNameToCopy);
        } else {
            DDLogError(@"File %@ could NOT be copied from bundle to Documents Dir due to error %@!!", fileNameToCopy, fileError);
        }

    return (success);
}

-7

मेरा जटिल समाधान (या ट्यूटोरियल) आरएसएस-फीड के लिए (RSSItems में मिलता है) केवल डिवाइस पर काम करता है:

#define CACHE_DIR       [NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES) lastObject]

for (RSSItem *item in _dataSource) {

    url = [NSURL URLWithString:[item link]];
    request = [NSMutableURLRequest requestWithURL:url];
    [request setHTTPMethod:@"GET"];

    [NSURLConnection sendAsynchronousRequest:request
                                       queue:queue
                           completionHandler:^(NSURLResponse *response, NSData *data, NSError *error) {

                               @autoreleasepool {

                                   if (!error) {

                                       NSString *html = [[NSString alloc] initWithData:data
                                                                              encoding:NSWindowsCP1251StringEncoding];

                                       {
                                           NSError *error = nil;

                                           HTMLParser *parser = [[HTMLParser alloc] initWithString:html error:&error];

                                           if (error) {
                                               NSLog(@"Error: %@", error);
                                               return;
                                           }

                                           HTMLNode *bodyNode = [parser body];

                                           NSArray *spanNodes = [bodyNode findChildTags:@"div"];

                                           for (HTMLNode *spanNode in spanNodes) {
                                               if ([[spanNode getAttributeNamed:@"class"] isEqualToString:@"page"]) {

                                                   NSString *absStr = [[response URL] absoluteString];
                                                   for (RSSItem *anItem in _dataSource)
                                                       if ([absStr isEqualToString:[anItem link]]){

                                                           NSArray *spanNodes = [bodyNode findChildTags:@"img"];
                                                           for (HTMLNode *spanNode in spanNodes){
                                                               NSString *imgUrl = [spanNode getAttributeNamed:@"src"];
                                                               if (imgUrl){
                                                                   [anItem setImage:imgUrl];
                                                                   break;
                                                               }
                                                           }

                                                           [anItem setHtml:[spanNode rawContents]];
                                                           [self subProcessRSSItem:anItem];
                                                       }
                                               }
                                           }

                                           [parser release];
                                       }

                                       if (error) {
                                           NSLog(@"Error: %@", error);
                                           return;
                                       }

                                       [[NSNotificationCenter defaultCenter] postNotificationName:notification_updateDatasource
                                                                                           object:self
                                                                                         userInfo:nil];

                                   }else
                                       NSLog(@"Error",[error userInfo]);
                               }
                           }];

तथा

- (void)subProcessRSSItem:(RSSItem*)item{

NSString *html = [item html];
if (html) {

    html = [html stringByReplacingOccurrencesOfString:@"<div class=\"clear\"></div>"
                                           withString:@""];

    html = [html stringByReplacingOccurrencesOfString:@"<p class=\"link\">"
                                           withString:@""];

    html = [html stringByReplacingOccurrencesOfString:@"<div class=\"page\">"
                                           withString:@""];

    html = [html stringByReplacingOccurrencesOfString:@"</div>"
                                           withString:@""];

    NSArray *array1 = [html componentsSeparatedByString:@"<a"];
    if ([array1 count]==2) {
        NSArray *array2 = [html componentsSeparatedByString:@"a>"];

        html = [[array1 objectAtIndex:0] stringByAppendingString:[array2 objectAtIndex:1]];
    }

    NSURL *url;
    NSString *fileName;
    NSString *filePath;
    BOOL success;
    if ([item image]) {

        url = [NSURL URLWithString:
                      [hostString stringByAppendingString:[item image]]];
        NSData *imageData = [NSData dataWithContentsOfURL:url];

        fileName = [[[url relativePath] componentsSeparatedByString:@"/"] lastObject];

        filePath = [NSString stringWithFormat:@"%@/%@",
                              CACHE_DIR,
                              fileName];

        //save image locally
        success = [[NSFileManager defaultManager] createFileAtPath:filePath
                                                               contents:imageData
                                                             attributes:nil];

        //replace links
        html = [html stringByReplacingOccurrencesOfString:[item image]
                                               withString:filePath];

        [item setImage:fileName];

        //Передадим обновление интерфейса, снабдив индексом обновляемой ячейки
        [[NSNotificationCenter defaultCenter] postNotificationName:notification_updateRow
                                                            object:self
                                                          userInfo:[NSDictionary dictionaryWithObject:@([_dataSource indexOfObject:item])
                                                                                               forKey:@"row"]];
    }

    //finalize html
    html = [NSString stringWithFormat:@"<html><body>%@</body></html>",html];

    fileName = [[[item link] componentsSeparatedByString:@"/"] lastObject];
    filePath = [NSString stringWithFormat:@"%@/%@",
                CACHE_DIR,
                fileName];
    success = [[NSFileManager defaultManager] createFileAtPath:filePath
                                                      contents:[html dataUsingEncoding:NSUTF8StringEncoding]
                                                    attributes:nil];

    [item setHtml:
     (success)?filePath:nil];//for direct download in other case
}

}

कंट्रोलर पर देखें

- (void)viewDidAppear:(BOOL)animated{

RSSItem *item = [[DataSingleton sharedSingleton] selectedRSSItem];

NSString* htmlString = [NSString stringWithContentsOfFile:[item html]
                                                 encoding:NSUTF8StringEncoding error:nil];
NSURL *baseURL = [NSURL URLWithString:CACHE_DIR];

[_webView loadHTMLString:htmlString
                 baseURL:baseURL];

}

rss आइटम वर्ग

#import <Foundation/Foundation.h>

@interface RSSItem : NSObject

@property(nonatomic,retain) NSString *title;
@property(nonatomic,retain) NSString *link;
@property(nonatomic,retain) NSString *guid;
@property(nonatomic,retain) NSString *category;
@property(nonatomic,retain) NSString *description;
@property(nonatomic,retain) NSString *pubDate;
@property(nonatomic,retain) NSString *html;
@property(nonatomic,retain) NSString *image;
@end

छवि के साथ किसी भी HTML का हिस्सा

<html><body>
<h2>blah-blahTC One Tab 7</h2>
<p>blah-blah НТС One.</p>
<p><img width="600" height="412" alt="" src="/Users/wins/Library/Application Support/iPhone Simulator/5.0/Applications/2EAD8889-6482-48D4-80A7-9CCFD567123B/Library/Caches/htc-one-tab-7-concept-1(1).jpg"><br><br>
blah-blah (Hasan Kaymak) blah-blah HTC One Tab 7, blah-blah HTC One. <br><br>
blah-blah
 microSD.<br><br>
blah-blah Wi-Fi to 4G LTE.</p>
</p>
</body></html>

htc-one-tab-7-concept-1 (1) .jpg नाम के लिए छवि सहेजी गई

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.