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

Question

我有一个数据库和 webview。 我希望 webview 能够在本地文件夹中显示文本和图像。

数据库：

该数据库是从下面的JSON中获得的：

"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"
                        ]
                    }
                ]
            },

对于img scr，我将其更改为本地文件夹中的图像路径。

代码：

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

我有一个问题，即本地文件夹中的图像无法在webview上显示，如下图：

如何处理？

笔记：

• 图片已成功下载并保存在本地文件夹（C:\Users\\AppData\Local\Packages\\LocalState\library\gambar\503）

• questionText是webview的名字

Answer 1

UWP 应用程序是与外部环境隔离的沙盒应用程序，无法直接通过路径访问文件，即使是 WebView。

可以直接将镜像的http链接传给WebView。 如果要离线访问，请将图像转换为 Base64 字符串并将该字符串作为图像源传递。

这是转换方法：

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

此致。