web-dev-qa-db-ja.com

UIWebView内でHTMLおよびローカル画像を使用する

私のアプリには、別のURLにリンクする画像を表示するために使用したいUIWebViewがあります。

私は使っています

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

問題は、プロジェクトにリソースとして追加されてバンドルにコピーされても、イメージがロードされない（つまり、見つからない）ことです。

NSBundleを使用して画像の完全なパスを取得し、それを使用してみましたが、それでもWebビューに表示されません。

何か案は？

htmliosiphoneuiwebviewuikit
160
Jasarien

相対パスまたはファイルの使用：画像を参照するパスは、UIWebViewでは機能しません。代わりに、正しいbaseURLを使用してHTMLをビューにロードする必要があります。

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

その後、次のように画像を参照できます。

<img src="myimage.png">

（ iwebview再訪 から）

289
Adam Alexander

これを使って：

[webView loadHTMLString:htmlString baseURL:[[NSBundle mainBundle] bundleURL]];
46
Lithu T.V

私もこの問題に遭遇しました。私の場合、ローカライズされていない画像と、複数の言語の画像を扱っていました。ベース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を使用します。

これが同じ問題に遭遇した人の助けになることを願っています。

24
Anton

私は同様の問題を抱えていたが、すべての提案は役に立たなかった。

ただし、問題は* .png自体でした。 アルファチャネルがありませんでした。どういうわけかXcodeはアルファチャネルのないすべてのpngファイルを無視します展開プロセス中。

6
user289841

base64イメージ文字列を使用してみてください。

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

NSString *strEncoded = [data base64Encoding];   

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

「MyProj」にファイルを追加およびフォルダー参照の作成を選択します。これで、次のコードがすべての参照画像、css、およびjavascriptを処理します

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

Swift 3：

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

これは、画像が変更なしでフォルダ内にある場合でも機能しました。

3
MrAn3

IOS 6プログラミングクックボックのいくつかの章を読み、objective-cおよびiOSプログラミングを学び始めた後、追加したいのは、リソースをcustomバンドルからロードする場合Webビューで使用すると、次のように実行できます。

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');
}
2
Lasse Christiansen

Lithu T.Vの回答の迅速なバージョン：

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

アダムアレクサンダースの迅速なバージョンObjective Cの回答：

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

画像への相対リンクを使用すると、iOSアプリのコンパイル後にすべてのフォルダー構造が保持されないため、画像は表示されません。できることは、代わりにローカルWebfolderをbundleに変換することです'。bundle'ファイル名拡張子を追加します。

したがって、ローカルWebサイトが「www」フォルダに含まれている場合、これは「www.bundle」に名前を変更する必要があります。これにより、イメージフォルダーとディレクトリ構造を保持できます。次に、 'index.html'ファイルをWebViewに 'baseURL'（www.bundleパスに設定）でHTML文字列としてロードし、相対画像リンクのロードを有効にします。

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

これらの回答は、特にfile：\\ xxxxxxx.xxxに役立ちましたが、画像を表示するための回避策が必要でした。

私の場合、サーバーにHTMLファイルがあり、ドキュメントディレクトリにダウンロードします。 UIWebViewのローカルグラフィックで表示したいのですが、作業できませんでした。私がやったことは次のとおりです。

  1. NSBundleからローカルドキュメントディレクトリにファイルをコピーします
  2. HTMLファイル内のファイルを「file：\\ 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);
}
0
DoctorG