How to assign uploaded image to image.source

Anvil Q&A
1

What I’m trying to do:

  • First, I’d like to show background only.
  • And then when doing mouse down on image area, I’d like to show image

What I’ve tried and what’s not working:

  • I uploaded image to asset
  • In the mouse down event, I assigned that image to image.source and image.visible = True
    I first used directly “”/theme/X-LETTER.png"" and as a second, URLMedia("/theme/X-LETTER.png")
    But nothing is shown when pressing

Code Sample:

# code snippet
class Form1(Form1Template):

  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)

    # Any code you write here will run when the form opens.

  def image_1_mouse_down(self, x, y, button, **event_args):
    """This method is called when a mouse button is pressed on this component"""
    print("image_1_clicked")
    self.image_1.source =  URLMedia("_/theme/X-LETTER.png")
    self.image_1.visible = True

Clone link:
https://anvil.works/build#app:K2PGXIWQCZAL5UQQ
share a copy of your app

2

Maybe remove the URLMEDIA

I simply set the image source to:


self.image_1.source="_/theme/X-;LETTER.png"

Also, You didn’t send your clone link correctly. You’ll find the option of clone link in the publish app option

3

Thanks but it doesn’t work :

  def image_1_mouse_down(self, x, y, button, **event_args):
    """This method is called when a mouse button is pressed on this component"""
    print("image_1_clicked")
    self.image_1.source =  "_/theme/X-;Letter.png"
    self.image_1.visible = True

But it works after changing file name. “;-” seems not working.

  def image_1_mouse_down(self, x, y, button, **event_args):
    """This method is called when a mouse button is pressed on this component"""
    print("image_1_clicked")
    self.image_1.source =  "_/theme/X.png"
    #self.image_1.visible = True

  def image_2_mouse_down(self, x, y, button, **event_args):
    """This method is called when a mouse button is pressed on this component"""
    print("image_2_clicked")
    self.image_2.source =  "_/theme/O_Letter.png"
    #self.image_2.visible = True

Thanks anyway.

4

What was the exact file name which shows up in the assets?

5

File name was “X-LETTER.png” and “O-LETTER.png”
If I change it to “X_LETTER.png”, or just “X.png”, it works.

image
image1164×288 12.6 KB

6

I see. I myself am new to Anvil so I don’t know the exact reason for this problem

7

Hi @andy.cskim,

As @divyeshlakhotia pointed out, the clone link you shared in the original post is incorrect.
Anvil Docs | Cloning Apps

We may be able to help you more if we can clone the app.

8

Hi Ryan,

Since it’s already solved, I don’t have old version which had the problem.

In short, hyphen, “-”, seems not supported in file name.
It didn’t work if it includes hyphen but OK after replacing hyphen with underscore or removing it.

9

Hello @andy.cskim,

I’m glad the problem is solved. For future reference, hyphens in file names aren’t an issue. Here’s a clone that demonstrates an image loading with a hyphen:
https://anvil.works/build#clone:72QJVFZ36MDAVJJE=BHLUEHGPKGMZBL3OMV2WV7NC