web-dev-qa-db-fra.com

Android - image locale dans la vue Web

J'essaie d'afficher une image locale dans ma vue Web:

 String data = "<body>" + "<img src=\"file:///Android_asset/large_image.png\"/></body>";
 webview.loadData(data, "text/html", "UTF-8");

Ce code n'affiche rien, au lieu de:

 webview.loadUrl("file:///Android_asset/large_image.jpg");

Celui-ci fonctionne, mais j'ai besoin d'une page Web complexe, pas seulement d'une image.

Des idées ?

androidimagewebviewandroid-webview
53
Stéphane Piette

Chargez le fichier HTML dans Webview et placez votre image dans le dossier de ressources et lisez-le en utilisant HTML.

<html>
  <table>
    <tr>
      <td>
        <img src="abc.gif" width="50px" alt="Hello">
      </td>
    </tr>
  </table>
</html>

Maintenant, chargez ce fichier HTML dans Webview

webview.loadUrl("file:///Android_asset/abc.html");
66
Sanjay Patel

Vous pouvez aussi essayer

String data = "<body>" + "<img src=\"large_image.png\"/></body>";

webView.loadDataWithBaseURL("file:///Android_asset/",data , "text/html", "utf-8",null);
46
Zain Ali

Un moyen pratique (souvent oublié) consiste à utiliser des images incorporées base64 dans un contenu HTML. Cela fonctionnera également sur les navigateurs Webkit mobiles (IOS, Android ..).

Le point d’utilisation de cette méthode est que vous pouvez incorporer des images dans du contenu HTML, au lieu de vous battre avec des liens d’image de la vue Web au système de fichiers restreint.

  <img src="data:image/jpg;base64,xxxxxxxxxxxxxxxxxxxxxxxxxxxx"/>

  xxxxx = base64 encoded string of images bytes

Si vous souhaitez fournir des données d’image (intégrées à base64) à partir du système de fichiers, vous pouvez par exemple:

1) Sous Android, utilisez ContentProvider - qui fournira des chaînes d’image au format base64. 

<img src="content://.............."/>

2) Ou vous pouvez prétraiter HTML avec JSOUP ou un analyseur DOM similaire (avant de le définir sur Webview) et ajuster l'image src avec une image correctement codée en base64.

Les inconvénients de cette méthode sont la surcharge incluse dans la conversion de l'image en chaîne base64 et bien sûr dans la production de données HTML plus volumineuses en vue Web. 

26
noxo

Utilisez cette méthode.

mview.loadDataWithBaseURL(folder.getAbsolutePath(), content, "text/html", "windows-1252", "");

folder.getAbsolutePath() peut être "file:///Android_asset" ou simplement "/"

8
Viren Savaliya

Je pense qu'il manque un \ dans votre code

   String data = "<body>" + "<img src=\\"file:///Android_asset/large_image.png\"/></body>";
2
Tanmay Mandal

Je sais que la réponse à la question est correcte, mais je vais la mettre en œuvre de manière efficace.

Étape 1 créer un fichier HTML dans un dossier de ressources

ex: -imageLaod.html

Note: Ici, dans les fichiers HTML, nous avons implémenté FullScreen Image en donnant style = "width: 100%"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
       <title>Load Image</title>
          <style type="text/css">
                h3{
                color:blue;
                }
        </style>   
    </head>
  <body>
        <h3>This image loaded from app asset folder.</h3>
        <img src="yourimage.png" style="width:100%" alt="companylogo"/>
  </body>
</html>

Étape 2: placez votre image dans le dossier des ressources. (ex: yourimage.png)

Étape 3: mettez le code ci-dessous dans le fichier Java.

    String folderPath = "file:Android_asset/";
    String fileName = "loadImage.html";
    String file = folderPath + fileName;
    WebView webView = findViewById(R.id.webview)
    webView.getSettings().setBuiltInZoomControls(true);
    webView.getSettings().setDisplayZoomControls(false);
    webView.loadUrl(file);

et c'est fait. vous pouvez voir l'image plein écran avec la fonction zoom avant/arrière de WebView.

J'espère que ça aide.

0
Gaurang Goda

enter image description here

 webView.loadDataWithBaseURL("file:///Android_asset/", sourse, "text/html", "UTF-8", null);
0
Georgy Gobozov

la meilleure approche pour moi consistait à créer mon fichier .html avec tous les textes et toutes les images dans MS Word, à enregistrer le fichier en tant que fichier .html et à copier le fichier .html et le dossier des pièces jointes correspondant dans le dossier assets, en indiquant l'adresse du fichier .html dans le dossier de ressources correspondant à webview.loadUrl()... Voici ce que vous devez faire ...

WebView webview = (WebView) findViewById(R.id.webView1);

webview.loadUrl("file:///Android_asset/learning1/learning1.htm");
0
Arash Parsayar

La manière la plus simple et directe est de créer un fichier html avec un éditeur html tel que kompozer ou ce que vous préférez. 

Placez votre fichier html dans le dossier assets et appelez webView.loadUrl(filename). Le dossier des ressources doit également contenir toutes les images que vous référencez dans vos fichiers HTML. 

Corrigez à l’avance dans le fichier html le chemin d’accès à vos images de manière à ne plus enregistrer que le nom de fichier pur. Le nom de fichier que vous transmettez à loadUrl doit porter le préfixe file:///Android_asset/. 

Si l'image ou le fichier ne se charge pas, vérifiez les noms de fichiers pour les blancs , trait d'union et autres éléments étranges, puis modifiez les noms de fichiers.

0
Alfred Bamberger

La solution de Zain a fonctionné pour moi. J'ai oublié d'ajouter mon dossier www contenant des fichiers HTML et d'autres sous-dossiers de css et d'images, etc. 

webView.loadDataWithBaseURL("file:///Android_asset/www/",data , "text/html", "utf-8",null);

..

0
zeeawan