Hello,
When I export the prototype to the directory and I start the prototype locally I see pictures on the left bar, but when I run the same prototype stored on the web site location the pictures on the bar are missing.
Missing pictures: Toggle table of Contents, Toggle highlight, Toggle notes, Home screen
Thank you for help
Ok, after following it with Libor through email, the issue was caused by the default IIS configuration. I'm adding the steps to fix it here in case anyone else stumbles onto this.
By default, IIS does not have the right MIME types configured for SVG files. If you use a browser inspector tool, like chrome devtools, you will see on the network tab that the file is being sent as application/octet-stream, as seen on the attached image.
You need to configure the web server so that SVG files are sent with image/svg+xml MIME type.
To do so, you can change the Web.config file to include something like the following:
<staticContent>
<remove fileExtension=".woff"/>
<mimeMap fileExtension=".woff" mimeType="application/font-woff"/>
<remove fileExtension=".json"/>
<mimeMap fileExtension=".json" mimeType="application/json"/>
<remove fileExtension=".svg"/>
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
</staticContent>
Inside the system.webServer section of the Web.config file. That will send the right MIME type for SVG, JSON, and WOFF (fonts) files. Here you can find the official Microsoft documentation about that section, which also instructs how to configure it using the IIS Manager:
http://www.iis.net/configreference/system.webserver/staticcontent/mimemap
Best regards,
Santiago.
Indigo Studio Team.
Hi
I have the same issue but with linux server. What should I do in order to fix it?
Regards
Hi!
Do you know which HTTP server are you using? Apache/nginx/other? Configuration varies depending on the server.
Thanks!
If I am not wrong Apache.
Issue solved
Thank you very much Santiago
Ah! That seems like a different issue. If you look at the Chrome Inspector results, you will notice those files are returned as Not Found (error 404).
I'm guessing that the problem here is that URLs are being case-sensitive while URLs on IIS (Windows) are not. To disable case sensitivity, you might be able to add these two lines to the .htaccess file:
CheckSpelling On
CheckCaseOnly On
Those configuration options require that the mod_spelling module for Apache is enabled, which is the case on a default Apache configuration. You can get additional information about these options on the mod_spelling reference documentation.
Let me know if that helps.
I asked my hosting company to do as you suggested, I have created an .htaccess file as the following and uploaded it to the project root folder but with no luck. I still see the broken images when clicking on the screen icon
### MIME TYPESAddType image/svg+xml .svgAddType application/font-woff .woffAddType application/json .json
OK, you are hosting and starting the server by yourself or is hosting provider?
For apache you have basically two ways:
1. Using an .htaccess file on the folder where the prototype is stored
For this one to work, .htaccess overrides must be enabled on the global apache configuration. If it's enabled, you should be able to add:
AddType image/svg+xml svg
On the file so that SVG files are sent correctly. Additionally, you can add definitions for WOFF and JSON files too:
AddType application/font-woff woff
AddType application/json json
2. Updating httpd.conf file: This requires editing the global apache configuration file. You should add the same lines that for the .htaccess file but on the httpd.conf file. The location of this files depends on your linux distribution, but it should probably be on /etc/httpd/
3. Updating the mime.types file: Also a global configuration file. Usually located alongside the httpd.conf file. You'll need to add:
image/svg+xml svg
application/font-woff woff
application/json json
If you don't have access to these files, you should ask your system administrator to configure these MIME types for you.
This configuration is required for any application that uses SVG files, not only for Indigo Studio prototypes, so any administrator should be able to do it.
You can find additional information on the Apache configuration reference.
Let me know if that helped,
Best Regards,