Best way to put simple content inside the node

[SciManJD]

I want to put a picture (png) inside the node. I found how can I do this in the documentation. I created a vue component and called it instead of the text in the "label". This works fine. But is there and easy way to do this without component just for one picture?

[bcakmakoglu]

What would be an "easier" way to do this for you?
Labels already allow you to pass a component instead of a simple string (which I assume you're using judging from your post), it won't get much easier than that, I'm afraid 😄

[bcakmakoglu]

To "simplify" passing an img, you could wrap your image in a render function

const img = () => h('img', { src: imgSrc, alt: 'some img' })

const elements = ref([
	{
		id: '1',
		position: { x: 0, y: 0 },
		label: img,
	}
])

[SciManJD]

Yes! This is exactly what I mean. But how to set a style? I tried this:
const img = () => h('img', { src: imgSrc, alt: 'some img', style: 'my style' })
but it doesn't work...

[bcakmakoglu]

my style isn't a valid style property though 😄
If you want to add a class name, use class: 'my-class'
If you actually want to use inline styles, you can either use the object notation or the regular css sytnax

Object:

const img = () => h('img', { src: imgSrc, alt: 'some img', style: { backgroundColor: 'red' } })

CSS:

const img = () => h('img', { src: imgSrc, alt: 'some img', style: 'background-color: red' })

[SciManJD]

Aaah, OK. I made it with class: 'my-class' and it works just fine. This is even better than to use style. Thanks! No more questions concerning this topic!

[bcakmakoglu]

A quick tip: h supports the same syntax for class that Vue would in any other component, meaning you can also use conditional class names.

const someBool = ref(false)

setTimeout(() => {
	someBool.value = true
}, 2000)

const img = () => h('img', { src: imgSrc, alt: 'some img', class: { 'my-class': someBool.value } })

This would apply the my-class class name to the img tag whenever someBool is true :)