How to add image to RichTextLabel from out?

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By I reject all deals

In RichTextLabel we can add image with img tags. But we need to put an image file. In godot we can take images data from out and we can show it in godot. For example:

var image = Image.new()
var error = image.load_png_from_buffer(body)
var texture = ImageTexture.new()
texture.create_from_image(image)

like that we can get image. But I want to show this image in RichTextLabel? How can I do it?

Have you tried using the resource_path property of the image as the path for the img tag?

HyperlinkYourHeart | 2023-06-12 18:45

I cant because the image is not on disk. I want to get image from web show it in RichTextLabel. I can do it with add_image() but problem is adding image to end of text. But I dont want to add it to end. I have an img tag in somewhere in richtextlabel and I want to update it with my image from web. Can you help me?

I reject all deals | 2023-06-13 18:56

Sorry, I don’t see any way to do it. Even saving it to the user directory doesn’t work, it has to have a “res://” path apparently.

HyperlinkYourHeart | 2023-06-13 20:02

Yes it needs an import file also. But add_image is working without file in disk. Just problem is adding image to end of text.

I reject all deals | 2023-06-13 20:14

:bust_in_silhouette: Reply From: jgodfrey

You can use the add_image() method of the RichTextLabel. Here’s an example:

func _ready():
	var image_file = "/mnt/tech1/Dev/Godot/scratch/icon.png"
	var image = Image.new()
	var error = image.load(image_file)
	if error == OK:
		var texture = ImageTexture.new()
		texture.create_from_image(image)
		$RichTextLabel.add_image(texture)

Thank you I will check it. So, can I add an image to a certain place in RichTextLabel with this method?

I reject all deals | 2023-06-12 19:38

It adds the image info directly to the tag stack, like many of the other methods do. So, the order that you call the methods in controls the order the contents are shown in…

jgodfrey | 2023-06-12 19:55

Thank you. I tried your code but it doesnt shows any thing. And it doesnt gives error also. What is wrong?

var image = Image.new()
var error = image.load_png_from_buffer(body)
var texture = ImageTexture.new()
texture.create_from_image(image)
$RichTextLabel.add_image(texture,0,0)

when I try this code it doesnt works. But if I use:

var image = Image.new()
var error = image.load_png_from_buffer(body)
var texture = ImageTexture.new()
texture.create_from_image(image)
var a = texture.get_data()
a.save_png("res://image.png")

it saves image as well.

EDIT: If I use your code in empty RichTextLabel it works but when I tried to apply it not empty richtextlabel it doesnt works

EDIT2: Maybe problem on me. I change something and now it works but its adding image end of text. Can I do it a replacement for example:

var page = $RichTextLabel
page.bbcode_text = page.bbcode_text.replace("[img][/img]",add_image(texture))

I reject all deals | 2023-06-12 20:21

I don’t see anything obviously wrong with your code (assuming body is valid), but your second snippet seems to indicate that it is. Maybe try my code as-is to verify that it works for you? It definitely works here. I’ll try something more like your code when I get a chance.

jgodfrey | 2023-06-12 20:34

I changed something and now it works but its adding image end of text. Can I do it a replacement for example:

var page = $RichTextLabel
page.bbcode_text = page.bbcode_text.replace("[img][/img]",add_image(texture))

I reject all deals | 2023-06-12 20:39

I’m really not familiar with the possibilities here. What exactly are you trying to do? I’m guessing that you have some pre-defined content in a RichTextLabel and you’re trying to dynamically update an image that’s part of that content?

I’ll see if I can do some experimentation soon, but I’d like to know specifically what you’re trying to achieve.

jgodfrey | 2023-06-12 20:54

Yes I have pre-defined content in a RichTextLabel and I want to update an image that’s part of that content. I am trying to do a simple web browser (or if you want you can call a toy browser) I am geting html, parsing it, and if an img tag in site I am giving it a number and continuing to read the page. When the reading is end, I am starting to get images from site. After that I want to put them in their place. Just last step left.

I reject all deals | 2023-06-12 21:00

So, a few things based on some quick experimentation:

  • You can simply include the path to the on-disk image file between [img][comment7-/img] tags within a bbcode string to display it in your RichTextLabel.

So, this:

var image_file = "/mnt/tech1/Dev/Godot/scratch/icon.png"
$RichTextLabel.bbcode_text = "[img]%s[/img]" % image_file
  • To create, and later manipulate, a complex tag structure, I’d guess you might want to simply manage a string of bbcode text. That way, you can use any of the string modification / substitution methods to update it as necessary. Then, when ready, just add the bbcode string to your RichTextLabel via either bbcode_text or append_bbcode.

===== EDIT =====

For example, this is just managed as a single string of BBCODE text.

jgodfrey | 2023-06-12 21:39

Yes I know but the problem is adding images from not on disk. [img] tag is adding images from godot project,it means it needs an import file. But in my case its not possible. I want to update an image that’s part of that content. But not from disk. Is there is a way to do it?

I reject all deals | 2023-06-13 18:53

Is there is a way to do it?

I’m not aware of a way (but there could be one). That said, why not just store the downloaded images in a temp folder (much like a browser does) for display purposes. Then, just clean up the folder when you’re done?

jgodfrey | 2023-06-13 22:05

Yes this is also way but when I tried to open an image (not in my godot project folder) its not opening and it wants an import file for image

I reject all deals | 2023-06-14 16:16

Hmmm… Yeah, I hadn’t intended for the image I loaded in the above sample code to be in the project folder. However, I now see that it was, and that if it’s outside of the project, it does indeed fail. So, you’re right… :frowning:

jgodfrey | 2023-06-14 19:25

So how we can solve it?

I reject all deals | 2023-06-14 20:07