Is there a way to add complex content (e.g. images) to "content" in joyride?

[cwikio]

I would like to do an onboarding screen "welcome to bla bla bla" with an image at the top, logo etc. Is there a way of doing it?

[gilbarbara]

Yes.
Check the content prop in the step's docs, and you can also check the examples.

[cwikio]

thank you @gilbarbara ! This has helped but for some reason I am not able to load any images. I am trying to reproduce this example with Users where there is svg (https://codesandbox.io/s/github/gilbarbara/react-joyride-demo?file=/src/Controlled/index.tsx), but my images are not getting loaded at all. This is my code:

'/feed': [
	{
		target: '.guided-tour-create-post-tour-feed',
		// content: `Welcome to ${BRAND_NAME} app! Within next 2 minutes we will guide you through the app functionality. The screen will get darker and we will highlight what you need to do. Don't worry if you accidentaly click and close the tour - there will be a red blicking dot at the last step you completed. Just click on it and the tour will continue from there. `,
		content: (
			<div className='w-full flex flex-col items-center justify-center gap-5'>
				<div className='bg-red-300 w-full'>
					<img src='/public/logo.svg' alt='logo' width={200} height={200} />
					<Image src='/public/images/homePageHero.jpeg' alt='logo' width={100} height={100} />
				</div>
				<p>Welcome to {BRAND_NAME} app! Within next 2 minutes we will guide you through the app functionality. The screen will get darker and we will highlight what you need to do. Don't worry if you accidentaly click and close the tour - there will be a red blicking dot at the last step you completed. Just click on it and the tour will continue from there.</p>
			</div>
		),
		styles: {
			tooltipContainer: {
				padding: '0px 0px',
			},
			buttonClose: {
				display: 'none',
			},
		},
		placement: 'center',
	},
]

and this is what I am getting:

any idea why would that happen? and how to resolve it?

[gilbarbara]

No idea. This is unrelated to this package.
You can read the documentation for the bundler you are using, specifically how to load static images.

[cwikio]

Thanks @gilbarbara, although I do not agree. I have the whole app done with plenty of images and no issues there. I saw in the code examples there was a svg used. Would there be any reason why jpgs/pngs etc. would not be usable by your package? or in general, there should be no issues. Once again, thank you for your help so far!

[gilbarbara]

• Which bundler are you using?
• Are your files inside /public? Where's that directory located in your app?
• If you copy the JSX from content and render it inline (after the Joyride, for example), does it render correctly?

[cwikio]

hi, I resolved the issue. It was very silly - the path was incorrect. My image is directly in the public folder and the correct path should be: . Now, everything works. Thank you once again!