Question

我有一个html页面，其中包含输入字段（我的面板html）。我需要从输入获取图像路径（在我的文件系统中）并将其设置为<img src = "path">（在标签html中）。我知道浏览器不允许获取文件的绝对路径。

问题：

1）如何将图像复制到我的资源：数据目录以获取图像相对路径并将其设置为<img src>？

2）是否有另一种方法可以将img src中的路径设置为我文件系统中的任何图像？

Answer 1

请参阅Nandu的解决方案。您无法将图像的src设置为file:// uri。

选项1

使您的panel.html成为特权页面。将chrome.manifest文件添加到您的插件中，然后使用您的chrome://***/content/***路径将该页面加载到面板中，现在它可以加载文件uris。

或者将您的资源页面注册为about:页面 - https://developer.mozilla.org/en-US/docs/Custom_about:_URLs

选项2

为它创建一个resource://，然后将你的src设置为。

您可以创建如下资源：

让res = Services.io.getProtocolHandler（＆＃34; resource＆＃34;）。QueryInterface（Ci.nsIResProtocolHandler）; res.setSubstitution（＆＃34; myAddonId / myimg＆＃34;，Services.io.newURI（＆＃39; file：//blah/blah/blah.png' ;, null，null））;

然后将src设置为resource://myAddonId/myimg

选项3

XHR图像设置responseType = 'blob'，然后在生成的blob上执行URL.createObjectURL，然后将img的src设置为该值。

要显示文件对话框并获取文件路径，请执行以下操作：

        var fp = Cc['@mozilla.org/filepicker;1'].createInstance(Ci.nsIFilePicker);
        fp.init(Services.wm.getMostRecentWindow('navigator:browser'), 'Pick directory the icon container file should be saved in', Ci.nsIFilePicker.modeOpen);
        // fp.appendFilters(Ci.nsIFilePicker.filterAll);

        var rv = fp.show();
        if (rv == Ci.nsIFilePicker.returnOK || rv == Ci.nsIFilePicker.returnReplace) {

            console.log('path to selected file:', fp.file.path);

        }// else { // cancelled }

Answer 2

你需要： 1.）在插件中包含图像（在数据文件夹下）ex：data \ image \ panelimg.jpg 2.）在panel.html文件中，您将通过它引用html文件的相对路径来引用img。例如：

您只能引用与附加组件捆绑在一起的资产（而不是文件系统中的任何图像）

如何将图像复制到firefox插件中的数据目录

2 个答案:

选项1

选项2

选项3

要显示文件对话框并获取文件路径，请执行以下操作：