在 webview 上显示本地文件夹中的文本和图像

Question

I have a database and webview. I want webview to be able to display text and images in the local folder.

Database:

The database is obtained from JSON below:

"list_soal": [
            {
                "qid": "33840",
                "question": "<p><img src=\"https://tryout.pendidikan.id/upload/16.JPG\" />Lafal&nbsp;yang melengkapi ayat tersebut adalah &hellip;.</p>",
                "has_img": "1",
                "images": [
                    "https://tryout.pendidikan.id/upload/16.JPG"
                ],
                "jawaban": [
                    {
                        "oid": "81912",
                        "q_option": "<p><img src=\"https://tryout.pendidikan.id/upload/1a1.JPG\" /></p>",
                        "score": "0",
                        "has_img": "1",
                        "images": [
                            "https://tryout.pendidikan.id/upload/1a1.JPG"
                        ]
                    },
                    {
                        "oid": "81913",
                        "q_option": "<p><img src=\"https://tryout.pendidikan.id/upload/1b1.JPG\" /></p>",
                        "score": "1",
                        "has_img": "1",
                        "images": [
                            "https://tryout.pendidikan.id/upload/1b1.JPG"
                        ]
                    },
                    {
                        "oid": "81914",
                        "q_option": "<p><img src=\"https://tryout.pendidikan.id/upload/1c1.JPG\" /></p>",
                        "score": "0",
                        "has_img": "1",
                        "images": [
                            "https://tryout.pendidikan.id/upload/1c1.JPG"
                        ]
                    },
                    {
                        "oid": "81915",
                        "q_option": "<p><img src=\"https://tryout.pendidikan.id/upload/1d1.JPG\" /></p>",
                        "score": "0",
                        "has_img": "1",
                        "images": [
                            "https://tryout.pendidikan.id/upload/1d1.JPG"
                        ]
                    }
                ]
            },

For img scr, I change it to the image path in the local folder.

Code:

StorageFolder installedLocation = ApplicationData.Current.LocalFolder;    
StorageFolder library = await installedLocation.CreateFolderAsync("library", CreationCollisionOption.OpenIfExists);
                                            StorageFolder gambar = await library.CreateFolderAsync("gambar", CreationCollisionOption.OpenIfExists);
                                            StorageFolder imgName = await gambar.CreateFolderAsync(quizID.ToString(), CreationCollisionOption.OpenIfExists);
                                            string imgPath = imgName.Path;
                                            string soal = "";
                                            if(question.Pertanyaan.ToString().Contains("https://tryout.pendidikan.id/upload/"))
                                            {   
                                                soal = Regex.Replace(question.Pertanyaan, "\"https://tryout.pendidikan.id/upload/", "''file:\\" + "\\" + "\\" + imgPath + "\\");
                                                soal = Regex.Replace(soal, ".JPG\"", ".jpg''");
                                            }
                                            string InsertQuestion = @"INSERT INTO DBQuestion (QID,Pertanyaan, QuizID) SELECT '" + question.QID.ToString() + "','" + soal + "','" + quiz.ID + "' WHERE not exists " +
                                            "(select QID and Pertanyaan and QuizID FROM DBQuestion WHERE QID='" + question.QID.ToString() + "' and Pertanyaan='" + soal + "' and QuizID='" + quiz.ID + "')";
                                            var quizQuestion = objConn.Prepare(InsertQuestion);
                                            quizQuestion.Step();
                                        }
    string QuestionPhrase = @"SELECT * FROM DBQuestion WHERE QuizID='" + quizID + "'";
                question = objConn.Prepare(QuestionPhrase);
     question.Step();

                questionText.NavigateToString(question[1].ToString());

I'm having a problem, ie the images in the local folder can't be displayed on the webview, like the image below:

How to handle it?

Note:

• The image has been downloaded and saved successfully in the local folder (C:\Users\\AppData\Local\Packages\\LocalState\library\gambar\503)

• questionText is the name of webview

Answer 1

UWP applications are sandboxed applications that are isolated from the external environment and cannot access files directly through the path, even WebView.

You can directly pass the http link of the image to the WebView. If you want to access it offline, convert the image to a Base64 string and pass the string as the source of the image.

Here is the convert method:

public static async Task<string> ImgToBase64(StorageFile file)
{
    var buffer = await FileIO.ReadBufferAsync(file);
    string result = Convert.ToBase64String(GetbytesFromBuffer(buffer));
    result = "data:image/png;base64," + result;
    return result;
}

public static byte[] GetbytesFromBuffer(IBuffer buffer)
{
    DataReader dataReader = DataReader.FromBuffer(buffer);
    byte[] bytes = new byte[buffer.Length];
    dataReader.ReadBytes(bytes);
    return bytes;
}

Best regards.