Menggunakan HTML dan Gambar Lokal Dalam UIWebView


164

Saya memiliki UIWebView di aplikasi saya yang ingin saya gunakan untuk menampilkan gambar yang akan ditautkan ke url lain.

saya menggunakan

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

Masalahnya adalah bahwa gambar tidak memuat (mis. Tidak dapat ditemukan) meskipun itu ditambahkan sebagai sumber daya dalam proyek saya dan disalin ke dalam bundel.

Saya sudah mencoba menggunakan NSBundle untuk mendapatkan path lengkap dari gambar dan menggunakannya dan masih belum muncul di tampilan web.

Ada ide?


Saya tidak lagi dapat melakukan ini pada iPhone OS 3.0. :( Info lebih lanjut (StackOverflow.com).
Joe D'Andrea

8
Mengapa memilih bawah? : /
Jasarien

5
Belum tentu mereka jahat. Mungkin mereka punya alasan yang sah? Kita mungkin tidak akan pernah tahu. Kalau saja mereka punya kesopanan untuk menjelaskan mengapa mereka menolak dalam komentar ...
Jasarien

63
Seharusnya diwajibkan untuk menulis komentar pada saat pemungutan suara.
Robert

@Jasarien: Saya membutuhkan fungsionalitas yang sama. tapi saya tidak mengerti apa yang harus dilewatkan dalam htmlString di [webView loadHTMLString: htmlString baseURL: baseURL] dan bagaimana saya meletakkan <img src = "image.jpg" /> gambar saya di html.
iPhone

Jawaban:


291

Menggunakan jalur atau file relatif: jalur untuk merujuk ke gambar tidak berfungsi dengan UIWebView. Alih-alih, Anda harus memuat HTML ke tampilan dengan baseURL yang benar:

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

Anda kemudian dapat merujuk gambar Anda seperti ini:

<img src="myimage.png">

(dari UIWebView ditinjau kembali )


15
[[NSBundle mainBundle] bundleURL] kita bisa menggunakan ini sebagai bundleURL
Naveen Shan

2
Semua ini bagi saya adalah memberi saya string di tampilan web saya yang saya tetapkan untuk htmlString saya. yaitu semua yang ditampilkan di halaman adalah "tour.html"
Chewie The Chorkie

Sebagai sidenote, jika Anda mencoba memuat file javascript sebagai kebalikan dari gambar, Anda harus melihatnya juga: stackoverflow.com/a/3629479/385619
Willster

dalam kasus Xamarin ad MonoTouch webvie.LoadHtmlString (strig, NSBundle.MainBundle.BundleUrl);
Erik Simonic

1
Bekerja sempurna di simulator, tetapi tidak di perangkat saya
jose920405

46

Gunakan ini:

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

5
Tetapi jawaban Anda identik dengan jawaban yang dipasang 3 tahun yang lalu ... Jawaban Anda tidak ada bedanya, tidak perlu diposkan karena jawaban yang diterima sudah mencakup apa yang Anda kirim.
Jasarien

13
Ini adalah versi satu-baris yang nyaman dari jawaban yang diterima - tidak ada salahnya dilakukan dengan memilikinya di sini.
MusiGenesis

9
@Jasarien bahwa jawaban oleh Adam Alexander adalah satu-satunya solusi hingga Agustus 2009. Tetapi dari Max OS X versi 10.6 properti baru bundleURLini ditambahkan di NSBundle. Tidak perlu mengambil bundlePath dan mengonversi ke URL. Jadi bagi orang yang bekerja di versi yang lebih tinggi dari 10.6 ini memberikan solusi yang lebih baik.
rineez

melihat banyak aktivitas -ve di posting ini baru-baru ini..Dan tidak ada yang mencatat mengapa itu terjadi?
Lithu TV

24

Saya juga mengalami masalah ini. Dalam kasus saya, saya berurusan dengan beberapa gambar yang tidak dilokalkan dan yang lainnya - dalam berbagai bahasa. URL dasar tidak mendapatkan gambar di dalam folder terlokalisasi untuk saya. Saya memecahkan ini dengan melakukan hal berikut:

// 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];

Lalu, gunakan imgHTMLTag di kode HTML UIWebView Anda saat Anda memuat konten.

Saya harap ini membantu siapa saja yang mengalami masalah yang sama.


1
Menggunakan file://adalah apa yang saya butuhkan.
So Over It

Bagus, persis apa yang saya butuhkan
Rubberduck

8

coba gunakan string gambar base64.

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

NSString *strEncoded = [data base64Encoding];   

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

6

Saya memiliki masalah yang serupa, tetapi semua saran tidak membantu.

Namun, masalahnya adalah * .png itu sendiri. Itu tidak memiliki saluran alfa . Entah bagaimana Xcode mengabaikan semua file png tanpa saluran alpha selama proses penyebaran.


Apa yang Anda lakukan untuk keluar dari ini? Apakah Anda menemukan solusi? Saya menghadapi masalah yang sama. UIWebView tidak menampilkan gambar karena memiliki No Alpha Channel.
spaleja

1
Saya menggunakan Gimp untuk menambahkan saluran alfa ke file png saya. Lihat docs.gimp.org/id/gimp-layer-alpha-add.html

3

Anda dapat menambahkan folder (mis. WEB dengan sub folder css, img dan js dan file test.html) ke proyek Anda dengan memilih Tambah File ke "MyProj" dan pilih Buat referensi folder . Sekarang kode berikut akan menangani semua gambar, css, dan javascript yang dimaksud

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

3

Dalam Swift 3:

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

Ini bekerja untuk saya bahkan ketika gambar itu ada di dalam folder tanpa modifikasi.


2

Setelah membaca beberapa bab dalam Pemrograman Cookbok iOS 6 dan mulai belajar pemrograman objektif-c dan iOS, saya hanya ingin menambahkan, bahwa jika seseorang akan memuat sumber daya dari bundel khusus dan menggunakannya dalam tampilan web , bisa dilakukan seperti ini:

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

Lalu, di html Anda, Anda bisa merujuk ke sumber daya menggunakan bundel "khusus" sebagai jalur dasar Anda:

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

1

Versi cepat dari jawaban Lithu TV:

webView.loadHTMLString(htmlString, baseURL: NSBundle.mainBundle().bundleURL)

1

Versi cepat jawaban Adam Alexanders Objective C:

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

0

Jika Anda menggunakan tautan relatif ke gambar maka gambar tidak akan ditampilkan karena semua struktur folder tidak dipertahankan setelah aplikasi iOS dikompilasi. Yang dapat Anda lakukan adalah mengonversi folder web lokal Anda menjadi bundel dengan menambahkan ekstensi nama file ' .bundle '.

Jadi, jika situs web lokal Anda terdapat dalam folder " www ", ini harus diubah namanya menjadi " www.bundle ". Ini memungkinkan folder gambar dan struktur direktori dipertahankan. Kemudian muat file ' index.html ' ke WebView sebagai string HTML dengan ' baseURL ' (atur ke www.bundle path) untuk mengaktifkan pemuatan tautan gambar relatif.

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

Jawaban ini memang membantu saya - khususnya file: \\ xxxxxxx.xxx, tetapi saya harus melakukan solusi untuk menampilkan gambar.

Dalam kasus saya, saya memiliki file HTML di server saya yang saya unduh ke direktori dokumen. Saya ingin ditampilkan dengan grafik lokal di UIWebView yang saya tidak dapat mulai bekerja. Inilah yang saya lakukan:

  1. Salin file dari NSBundle ke direktori dokumen lokal
  2. Referensi file dalam dokumen HTML saya sebagai "file: \\ filename.png"

Jadi di awal salin file ke direktori dokumen:

-(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

Solusi kompleks saya (atau tutorial) untuk rss-feed (dapatkan di RSSItems) hanya berfungsi di perangkat:

#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]);
                               }
                           }];

dan

- (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
}

}

pada View controller

- (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];

}

kelas item 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

bagian dari html dengan gambar

<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>

gambar disimpan untuk nama htc-one-tab-7-concept-1 (1) .jpg

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.