dart - WebUI中的base64 img src导致错误

Question

这是模板中有问题的部分:

<ul id="list">
  <template iterate='file in convertedfiles.files'>
    <li>{{file.filename}}
    <template if='file.isImage'>
      <img src="{{file.src}}" alt="{{file.filename}}"><br/>
      Source: {{file.src}}
     </template>
    </li>
  </template>
</ul>

convertedfiles是AndroidFile的列表:

class AndroidFile {
File _file;  

String filename;
String src;
bool isImage;

AndroidFile(this._file) : isImage = false {
    filename = htmlEscape(_file.name);

    // If the file is an image, read and display its thumbnail.
    if (_file.type.startsWith('image')) {
    FileReader reader = new FileReader();
    reader.on.load.add((e) {
        src = reader.result.toString().trim();

        // prints the correct URL (data:image/png;base64,...)
        print(src);
        isImage = true;  
        watcher.dispatch();
      });

    reader.readAsDataUrl(_file);  
    }
  }
}

显示模板。它显示文件名，显示源，但是imagetag看起来像

 <img alt="screenshot-1179.png" src="#"> 

哈希值带有下划线(在Chromium源代码 View 中)，如果单击它，则显示“找不到文件:/ web / out /”

在Chrome中说转换为JS:
“资源被解释为图像，但以MIME类型text / html传输”

样本来源在 GitHub上
有什么提示吗？

Answer 1

请注意，如果您知道要处理的安全URI不受XSS的影响，则可以使用SafeUri包装器(从web_ui/web_ui.dart导入)来解决此问题。例如，从以下位置更改模板:

<img src="{{file.src}}" alt="{{file.filename}}">

至:

<img src="{{new SafeUri.unsafe(file.src)}}" alt="{{file.filename}}">

或在内部更改file.src以存储SafeUri。