Images are not rendered by the Help pane on Windows

[ufechner7]

Simple example:

class test(object):
    """
    diagram:

    .. image:: picture.png
    """
    pass

Save this code in a file like test.py. Save any small picture in as picture.png in the same folder.

Put the cursor in front of the class name "test" and press < ctrl >< i >.

The object inspector displays:

class test(object)

diagram

and an empty box instead of the picture.

This should be fixed. I like the object inspector, and I like to add diagrams to some of my methods and classes to explain how they work.

[goanpeca]

@blink1073 did you look at this at some point if I am not mistaken?

[ccordoba12]

I think this is solved in master, and @blink1073 did it :-)

[ufechner7]

Does someone know the commit or the pull request? Perhaps I can apply that to my local spyder version.

[blink1073]

@ufechner7, https://bitbucket.org/spyder-ide/spyderlib/pull-request/12/add-ability-to-re-trigger-docstring-while/diff.

If using absolute paths, they must must be URIs, in this case: file:///path/to/picture.png. See http://en.wikipedia.org/wiki/File_URI_scheme.

[taoluo]

@ccordoba12 I tried the master branch, but images are still missing.

[kklmn]

I can add that the problem is not with the path. When the image is found (left case), the bounding box is displayed without the content but with the file name in it, without extension. If it is not found (right case), a default placeholder appears.
Also, the star extension (".*") is not understood and is again the "not found" case.

[yxrmz]

Known image size means the script can see an image when generating the html.
The problem with the images is hiding iside the Javascript called "fix_image_paths.js" (irony).
First, since I live in Windows world, all paths contain the backslash symbol, which is an escape character and causes errors if appears explicitly in your file. So I modified the generate_context in spyderlib/utils/inspector/sphinxify.py to replace the backslashes in the img_path to forward ones before sending them to sphinx:

    context = \
    {
      'math_on': 'true' if math else '',
      'name': name,
      'argspec': argspec,
      'note': note,
      'collapse': collapse,
      #'img_path': img_path,
      'img_path': re.sub('\\\\', '/', img_path),

My second problem was in the way I set the relative path to the images in reST: "folder_name/image_name.png"

If you take a look inside"fix_image_paths.js", you will notice that the folder name is simply ignored:

$(document).ready(function () {
    $('img').attr('src', function(index, attr){
        var path = attr.split('/')
        var img_name = path.reverse()[0]
        return '{{img_path}}' + '/' + img_name
    });
});

So, I modified it slightly:

$(document).ready(function () {
    $('img').attr('src', function(index, attr){
        //var path = attr.split('/')
        //var img_name = path.reverse()[0]
        //return '{{img_path}}' + '/' + img_name
        return '{{img_path}}' + '/' + attr
    });
});

Now all my images are visible in the inspector.

[Nodd]

I just checked on Linux, everything works for me: image with no path, relative path, absolute path.

[ccordoba12]

I'm going to test this on Windows before closing ;-)