web-dev-qa-db-fra.com

Utilisation de HTML et d'images locales dans UIWebView

J'ai un UIWebView dans mon application que je veux utiliser pour afficher une image qui sera liée à une autre URL.

J'utilise

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

Le problème est que l'image ne se charge pas (c'est-à-dire qu'elle est introuvable) même si elle est ajoutée en tant que ressource dans mon projet et qu'elle est copiée dans le bundle.

J'ai essayé d'utiliser NSBundle pour obtenir le chemin d'accès complet de l'image, et cela ne s'affiche toujours pas dans la vue Web.

Des idées?

htmliosiphoneuiwebviewuikit
160
Jasarien

L'utilisation de chemins relatifs ou de fichiers: les chemins pour faire référence à des images ne fonctionne pas avec UIWebView. Au lieu de cela, vous devez charger le code HTML dans la vue avec l'URL de base correcte:

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

Vous pouvez ensuite vous référer à vos images comme ceci:

<img src="myimage.png">

(de iwebview revisité )

289
Adam Alexander

Utilisez ceci:

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

J'ai juste rencontré ce problème aussi. Dans mon cas, je traitais des images non localisées et d’autres - en plusieurs langues. Une URL de base n'a pas reçu les images dans les dossiers localisés pour moi. J'ai résolu ceci en procédant comme suit:

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

Ensuite, utilisez imgHTMLTag dans votre code HTML UIWebView lorsque vous chargez le contenu.

J'espère que cela aide tous ceux qui rencontrent le même problème.

24
Anton

J'ai eu un problème similaire, mais toutes les suggestions n'ont pas aidé.

Cependant, le problème était le * .png lui-même. Il n'y avait pas de canal alpha. D'une manière ou d'une autre Xcode ignore tous les fichiers png sans canal alpha pendant le processus de déploiement.

6
user289841

essayez d'utiliser la chaîne d'image base64.

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

NSString *strEncoded = [data base64Encoding];   

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

Vous pouvez ajouter un dossier (par exemple, WEB avec les sous-dossiers css, img et js et le fichier test.html) à votre projet en choisissant Ajouter des fichiers à "MyProj" et en sélectionnant Créer des références de dossier . Maintenant, le code suivant prendra soin de toutes les images référencées, css et javascript

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

Dans Swift 3:

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

Cela a fonctionné pour moi même lorsque l'image se trouvait dans un dossier sans aucune modification.

3
MrAn3

Après avoir lu quelques chapitres dans iOS 6 Programmation Cookbok et commencé à apprendre la programmation objective-c et iOS, je voudrais juste ajouter que si l’on charge les ressources d’un bundle personnalisé et utiliser cela dans une vue Web, cela peut être accompli comme ceci:

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

Ensuite, dans votre code HTML, vous pouvez faire référence à une ressource en utilisant l’ensemble "personnalisé" comme chemin de base:

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

Version rapide de la réponse de Lithuanie T.V:

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

Version rapide d'Adam Alexanders Objective C réponse:

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

Si vous utilisez des liens relatifs aux images, celles-ci ne s'afficheront pas car toutes les structures de dossiers ne sont pas conservées après la compilation de l'application iOS. Ce que vous pouvez faire est de convertir votre dossier Web local en un ensemble en ajoutant l'extension de fichier '. bundle'.

Donc, si votre site Web local est contenu dans un dossier "www", il devrait être renommé "www.bundle". Cela permet de conserver les dossiers d'images et la structure de répertoires. Chargez ensuite le fichier 'index.html' dans la vue Web sous forme de chaîne HTML avec le caractère 'baseURL' (défini sur www.bundle path) pour permettre le chargement de liens d'image relatifs.

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

Ces réponses m'ont aidé - en particulier le fichier: \\ xxxxxxx.xxx, mais j'ai dû faire une solution de contournement pour afficher l'image.

Dans mon cas, j'ai un fichier HTML sur mon serveur que je télécharge dans le répertoire des documents. Je veux qu'il affiche avec un graphique local dans un UIWebView que je ne pouvais pas me rendre au travail. Voici ce que j'ai fait:

  1. Copiez le fichier de NSBundle dans le répertoire de documents local.
  2. Référencez le fichier dans mon document HTML en tant que "fichier: \\ nomfichier.png"

Donc, au démarrage, copiez le fichier dans le répertoire de documents:

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