Load image from packagefolder


#1

Hi,
how can I load a image inside coffescript from a folder inside a package?

I wrote @img src: 'generic-file-icon.png'. this generate the imagetag but it try to load the file from
file:///Applications/Webentwicklung/Atom.app/Contents/Resources/app.asar/static/generic-file-icon.png
not from the packagefolder.

Cheers


#2

You might need to declare the whole path. Try %USERPROFILE%/.atom/packages/<packagename>/generic-file-icon.png.


#3

Hi,
thanks for your reply!

No, this doesn’t work well also.
Sorry But I’m really new in the Atom packages stuff and there are not so much helpsites on the web.
Have I use the brackets in the packagename?

But I have used different variations of the path. Nothing worked well.
More ideas?

Cheers


#4

No, those are to indicate that you don’t literally type that part. You know what your package is named and I don’t.

I can’t help you any more than that unless you share the code you’re working on so I can see it in context.


#5

Hi,

it is a adjustment from me for the modal from the package remote-edit.
I put the image in the meanwhile in the subfolder images.
I adjusted the hosts-view.coffee of the package:

{$, $$, SelectListView} = require 'atom-space-pen-views'
{CompositeDisposable, Emitter} = require 'atom'
_ = require 'underscore-plus'

FilesView = require './files-view'
HostView = require './host-view'

SftpHost = require '../model/sftp-host'
FtpHost = require '../model/ftp-host'

module.exports =
  class HostsView extends SelectListView
    initialize: (@ipdw) ->
      super
      @createItemsFromIpdw()
      @addClass('hosts-view')
 
      @disposables = new CompositeDisposable
      @disposables.add @ipdw.onDidChange => @createItemsFromIpdw()

      @listenForEvents()

    destroy: ->
      @panel.destroy() if @panel?
      @disposables.dispose()

    cancelled: ->
      @hide()
      @destroy()

    toggle: ->
      if @panel?.isVisible()
        @cancel()
      else
        @show()

    show: ->
      @panel ?= atom.workspace.addModalPanel(item: this)
      @panel.show()

      @storeFocusedElement()

      @focusFilterEditor()

    hide: ->
      @panel?.hide()

    getFilterKey: ->
      return "searchKey"

    viewForItem: (item) ->
      keyBindings = @keyBindings

      $$ ->
        @li class: 'two-lines', =>
          @div class: 'image-line', =>
            @div class: 'embed-container', =>
              @img class: 'iframeoverlay', src: '%USERPROFILE%/.atom/packages/remote-edit/images/generic-file-icon.png'
              @iframe src: "http://#{item.hostname}"
              
            if item.alias
              @span class: 'inline-block highlight', "#{item.alias}", =>
                @i class: 'octicon octicon-info'
            else
              @i class: 'octicon octicon-info'           
          @div class: 'primary-line', =>
            @span class: 'inline-block', "#{item.username}@#{item.hostname}:#{item.port}:#{item.directory}"
          if item instanceof SftpHost
            authType = "not set"
            if item.usePassword and (item.password == "" or item.password == '' or !item.password?)
              authType = "password (not set)"
            else if item.usePassword
              authType = "password (set)"
            else if item.usePrivateKey
              authType = "key"
            else if item.useAgent
              authType = "agent"
            @div class: "secondary-line", "Type: SFTP, Open files: #{item.localFiles.length}, Auth: " + authType
          else if item instanceof FtpHost
            authType = "not set"
            if item.usePassword and (item.password == "" or item.password == '' or !item.password?)
              authType = "password (not set)"
            else
              authType = "password (set)"
            @div class: "secondary-line", "Type: FTP, Open files: #{item.localFiles.length}, Auth: " + authType
          else
            @div class: "secondary-line", "Type: UNDEFINED"

    confirmed: (item) ->
      @cancel()
      filesView = new FilesView(item)
      filesView.connect()
      filesView.toggle()

    listenForEvents: ->
      @disposables.add atom.commands.add 'atom-workspace', 'hostview:delete', =>
        item = @getSelectedItem()
        if item?
          item.delete()
          @setLoading()
      @disposables.add atom.commands.add 'atom-workspace', 'hostview:edit', =>
        item = @getSelectedItem()
        if item?
          hostView = new HostView(item)
          hostView.toggle()
          @cancel()

    createItemsFromIpdw: ->
      @ipdw.getData().then((resolved) => @setItems(resolved.hostList))

#6

Okay, try atom://remote-edit/images/generic-file-icon.png, like PlatformIO IDE does for its home screen.


#7

Thank your very much. Now it works!


#8

No problem. :slight_smile: