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

最好的问候。