2

.NET Framework4.8 の WPF で開発してます。
Window に配置した WebView2 コントロールにhtml を表示させていますが、img タグでインターネット上の画像は表示されますが、ローカルに配置した画像をフルパスで表示させようとすると表示されません。
WebView2 の開発者ツールで調べると「Not allowed to load local resource」とエラーが出ています。

imgタグの src に指定したパスを調べても問題は見られず、Chrome のアドレスバーに貼り付けると画像は正常に表示されます。また html を Chromeで開くと img タグのローカル画像は表示されます。

どうにかローカルの画像を WebView2 で表示させる方法はないものでしょうか?

3 件の回答 3

2

fileプロトコルはなにかと制限厳しいので難しいのではないでしょうか?
(NavigateToStringはローカルならではの特例が適用されないようなので)

WebView2のissueに登録されていた例では、SetVirtualHostNameToFolderMappingを使って特定のホスト名でローカルファイルに見せかけるテクニックで回避する例が紹介されていますね。

https://github.com/MicrosoftEdge/WebView2Feedback/issues/642#issuecomment-736760565

上記を参考に手元で試したもの:

        var webView2Environment = await CoreWebView2Environment.CreateAsync();
        await MyView.EnsureCoreWebView2Async(webView2Environment);

        var localFolderPath = @"f:\tmp\";
        MyView.CoreWebView2.SetVirtualHostNameToFolderMapping("MyFiles", localFolderPath, CoreWebView2HostResourceAccessKind.Allow);

        // http かつ MyFiles というホスト名に置換しているのがミソ
        MyView.NavigateToString(@"<html>
<body>
<img src=""http://MyFiles/1.jpg"" />
</body>
</html>");
1
  • こんな方法があったのですね!当方の環境でも SetVirtualHostNameToFolderMapping メソッドを使い、バーチャルホスト名とフォルダパスのマッピングを設定したところ、ホスト名経由でローカル画像を表示できるようになりました。有難うございました。 Commented 2021年8月11日 6:09
0

手元の.NET 4.7.2(WebView2 1.0.902.49)環境では下記のコードで問題なく画像が表示されています。

htmlファイルの場所はローカルでしょうか。
またChromeではなくEdgeでも問題なく画像が表示されるでしょうか。

類似質問の回答: File URL "Not allowed to load local resource" in the Internet Browser

xaml

<Window x:Class="WpfApp2.MainWindow" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
        xmlns:local="clr-namespace:WpfApp2" 
        xmlns:wv="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf" 
        mc:Ignorable="d" 
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <wv:WebView2 Name="MyView" Source="C:\test\html\index.html"/>
    </Grid>
</Window>

html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html>
<body>
<img src="file:///C:/test/html/test.png"/>
</body>
</html>
3
  • 返信ありがとうございます。htmlファイルの場所はローカルです。 あと Chrome だけてなく Edge でも問題なく画像は表示されます。 Commented 2021年8月4日 6:55
  • 情報ありがとうございます。再現可能なコードやhtmlを上げていただけるとより具体的な回答が得られるかもしれません。(私の検証環境では正常動作してしまっているので…)
    – payaneco
    Commented 2021年8月4日 8:58
  • 1
    調査したところ、html の表示に WebView2.NavigateToString メソッドを使ってますが、このメソッドではローカル画像が表示されないようです。WebView2.Source プロパティを場合、表示されることがわかりました。 諸般の事情で Sourceプロパティではなく、NavigateToString メソッドを使いたいところです。 Commented 2021年8月5日 1:51
0

WebView2.Source プロパティとWebView2.NavigateToString メソッドの挙動を比較してみました。WebView2.Source プロパティはimgタグでローカル画像が表示されますが、NavigateToString メソッドでは表示されません。

using System;
using System.IO;
using System.Text;
using System.Windows;
using Microsoft.Web.WebView2.Core;

namespace WebView2Test {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }

        private async void Window_ContentRendered(object sender, EventArgs e) {
            var webView2Environment = await CoreWebView2Environment.CreateAsync();
            await wv2.EnsureCoreWebView2Async(webView2Environment);

            // これはローカル画像が表示される
            wv2.Source= new Uri(@"file:///C:\Users\xxxx\Desktop\test2.html");

            // これはローカル画像が表示されない
            var sr = new StreamReader(@"C:\Users\xxxx\Desktop\test2.html", Encoding.UTF8);
            var html = sr.ReadToEnd();
            wv2.NavigateToString(html);
        }
    }
}

推測するに NavigateToString メソッドはセキュリティの関係上、ローカルファイルへアクセスできないようにしているのでしょうか?そこで回避策として、いったんローカルに加工したHTMLを保存し、Source プロパティで読み込むようにしてみました。

private async void Window_ContentRendered(object sender, EventArgs e) {
    var webView2Environment = await CoreWebView2Environment.CreateAsync();
    await wv2.EnsureCoreWebView2Async(webView2Environment);
    var path = @"C:\Users\xxxx\Desktop\test3.html";
    using (var sr = new StreamReader(@"C:\Users\xxxx\Desktop\test2.html", Encoding.UTF8)){
        var html = sr.ReadToEnd();
        // html の加工処理を行なう・・・・
        html = html.Replace("<img src", "<br/><img src");
        using (var wr = new StreamWriter(path, false, Encoding.UTF8)) {
            wr.WriteLine(html);
        }
    }
    wv2.Source = new Uri(path);
}

ストリームを書き込むオーバーヘッドが発生するため釈然としない思いがありますが、当面これで回避しようと思います。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。