Same when using the following inline style syntax (I know this can be solved by moving to the stylesheet css file but just adding this since others might stumble upon this also and can use this as a reference)
This is a faster way of assigning a background image and like this a general class for multiple div components can be used instead of an extra id for each background image.
So I'm not entirely sure what your meaning. So I tried to create a situation in the app's preview to see that when I click it the image swaps between the initial SRC and the data-active-url property.
I know that you aren't really doing that but it's a away for me to kind of get something similar done I suppose.
One thing to note is that in the app in the Design pane, the lower right corner, the Image menu is the directory path of assets/img/ so you shouldn't really state it in the SRC or other attributes. You should only state the sub folder if you have one or just the direct images file name. So your first example does in fact fail because of it in a preview situation but is then correct in an export. I believe the app edits your code to insert the /assets/img/ in the SRC for your images, unless, I think if it detects that it is already there.
This is only when using custom code. If writing custom code then when using the examples above or the preview is broken or the export. So as mentioned above it will link to different asset folders. When writing piece of custom code it adds the assets/* folders in a different way. If wanted I can send the entire piece of code.
So when not adding the assets/* root folders the export will not link correctly and the preview will work and visa versa.
How comes I use a custom piece of code? Well this is because I imported an existing Theme/Template to be used in an easy way by a designer that does not have real knowledge of Bootstrap and programming so the Bootstrap Studio is a great alternative so he can easily do a little more with it and learn generated code.
If not possible to fix, although this should be rather easy using regexes on custom code.
Since you are importing someone else's HTML and in their HTML they have their image SRC's as "assets/img/filename.ext", that will not work in the app/preview if the Images menu in the DESIGN pane on the bottom right of the app lists the images as direct descendants.
For example
Images
filename.ext (would not work in app/preview, does work in export)
Images
assets (folder)
- img (subfolder)
-- filename.ext (file of subfolder) (does work in app/preview, does work in export)
Another example
With path assets/img/
*HTML*
<img src="assets/img/filename1.ext" />
Images menu
filename1.ext
Exported result
<img src="assets/img/filename1.ext" />
Without path assets/img/
*HTML*
<img src="filename1.ext" />
Images menu
filename.ext
Exported result
<img src="assets/img/filename1.ext" />
With path assets/img/
*HTML*
<img src="assets/img/filename1.ext" />
Images menu
assets (folder)
- img (subfolder)
-- filename1.ext (file of subfolder)
Exported result
<img src="assets/img/assets/img/filename1.ext" />
Probably the thing I would suggest for you is, if all images are direct descendants, then remove the path "assets/img/" from all images in the Custom Code.
I meant to include that regarding the use of data-active-url="assets/img/logo-active.png" since the image in the app doesn't exist as
Images menu
assets (folder)
- img (subfolder)
-- logo-active.png (file of subfolder)
Then in the preview that image doesn't exist until you have exported your project.
Also you wouldn't want to make that path in your Images menus because that will just make another assets/img/ directory path inside the directory path assets/img/
i.e. assets/img/assets/img/
As a pre-export option, use the Create JS option on right clicking the Javascript menu then double click that untitled.js file and enter in this JS code.
$("[data-active-url]").each(function(){
var $this = $(this),
daUrl = $this.data("active-url").split("/");
$this.attr("data-active-url",daUrl[2]);
});
Just be sure to not include that JS file when you export. This will rewrite all "data-active-url" attributes by effectively stripping out the assets/img/ path.
Thank you for opening this thread, and thanks to Saj's for his incredible assistance :)
Bootstrap Studio does a lot of processing to src, href, srcset and style attributes, so that users can forget about path issues and just type in their image names. But this isn't extended to custom attributes like your data-img example. For that you will have to include the full path that exported images would take, like Saj has demonstrated.
Just for the record so that it's known, I do a lot of Custom Code boxes for things like galleries, and I just tested this with just a plain link in a Custom Code box and I am fully able to use the same type of linking as what I use if it's not in a custom code box. In other words:
Works both in BSS and in Preview. I do exactly the same for my galleries for WowSlider. It needs the images to be placed in a specific directory, so I add that directory to my image path (creating a folder with exact name), import the images there, and then I can reference them in a custom code box the same as I would outside of the Custom code box. No need for Full URL unless you have some special circumstances. Just be sure to put your images in the directories they are needed to be in for your scripts, or just add your images to where you need them for whatever component you're using and reference the same way.
Not sure why this wouldn't work for everyone, it's definitely working for me on all aspects so far.