How do I display images referred in the custom code?

Bootstrap Studio Help
1

Hello! I have a custom code block that needs to load an image in a parent folder, so the code inside of it is like this:

code code code code code code code code code

<img src="../logo.png" />

code code code code code code

But the image isnt shown on the tool, only when I open the exported html directly. What can I do to solve that? (I really need the images to be automatically loaded from the sources, importing them one by one would take weeks.) Thanks!

2

When you do custom code you need to do one of a few variations of the links to images, pages, etc.:

  1. Use an Absolute URL. Keep in mind that when the website exports, the CSS, Fonts, Img etc. folders are all within an Assets folder so you cannot just reference them like within your code, because custom code blocks do not read the site like it an internal link/img does. The built in Links and Images sections are setup to read things as they will be when they are exported, so they already know where everything in the site is located. With a Custom Code block, there's no knowledge built into it, it's fully custom code so you need to tell it where exactly everything will be.

  2. Use a relative location to an already uploaded location on the site (this would be my first choice if you're dealing with a lot of images as you can then manage them easier as well.). You will not see the image in the app or previews since the images are not within BSS, but this way you can reference just like you did and as long as you put the images into that location directly (since they won't be within the Assets folder) they will show up just fine on export.

  3. Use the relative links as you are doing now, and realize that you will need to add the "assets/img/ to the prefix of each of your references in custom code blocks. This should allow you to see the images within the app and previews.

Whichever way you go, just realize you're just needing to tell the page the exact location of an item if you want to view it (Absolute) or reference the Relative location if you don't care if you see it in the app. Test things to be sure they show up first and then go from there.