Hubspot - local hubl server - Images will not load

Question

Since a day or two i've started out playing around with the hubspots local-hubl-server for local development.

Things are going quite smoothly, but there's a single oddity I keep running into.

While I am able to include or reference other assets (like .js-files, .css and pretty much any other content...) whenever I want to include an image it seems the local hubspot server is altering the source image before sending the resource. The files are found fine (status 200) and some data is transmitted, however if I save this output as an image it appears as corrupt to ie GIMP.

I've tried using different image-types, but this is at-least happening to all files with a .png, .jpg, .gif and .bmp-extensions and I notice from the terminal output and the saved assets that the file-size has been altered.

adding a "?noresize" to the end of the source-url's doesnt seem to alleviate this either... contrary to what's suggested here: http://knowledge.hubspot.com/articles/kcs_article/cos-general/does-hubspot-automatically-compress-images .

The only succesfull workaround i've found was to encode the image in BASE64 and save it with a .txt extension, then loading it as an insert into the image-contents with inline styling. It works, but ofcourse is not-at-all how it should be done...

Is anyone familiar with this problem or has any lead to possible (other) causes?

I'm running on Ubuntu 15.10 with JDK/JRE 1.8.0_91

Answer 1

I had the exact same problem and got on the phone with HubSpot about it. The solution is undocumented, but works for me.

All images must use an absolute path starting with /file_manager/ resulting in HTML like <img src="/file_manager/img/happy.gif" />

This special file_manager folder doesn't exist, but is used by HubSpot to map the route to the images in production because the location on your local HubL and the location in production are different. The rest of the path to your image depends on the path to your theme and where the images are stored in the theme.

Using the HubSpot boilerplate Vast theme as the example:

• The path to the theme in conf.yaml is work/hubthemes/vast
• Within the vast folder, images are located in img
• The path to your image happy.gif would be /file_manager/img/happy.gif

If you change the path to your theme or the images exist in a different folder, you'll have to change your url accordingly. It just always had to start with file_manager