asp.net-mvcsitecore

Image from sitecore showing up incorrectly on webpage - changing url hash fixes it?


We have an image on our site that is showing up with black borders on both sides (this is not intended). When I open the inspector and open the image source, and then I change the hash value in the url at all, the image shows back up correctly. I don't have the biggest idea as to why this happens, but it seems the hash is related to image re-sizing? Changing it has the image fill up where the borders are. Can anyone point me in the right direction on finding a solution to this? I don't know yet what to do with this assumption.


Solution

  • I've noticed that you are using both w (width) and h (height) parameters in the query string. When both parameters are specified, Sitecore will resize the image and if the original image aspect ratio is different from the aspect ratio of specified parameters, the remaining space will be filled with the default colour. By default this colour is black, but can be changed using the setting Media.DefaultImageBackgroundColor.

    Then, the hash parameter is used to protect the website from attacks by generating image URLs on the server side and adding a hash of the entire image URL with all parameters and a secret salt. If somebody tries to change any parameter or change the hash directly in the URL, Sitecore will not try to resize the image and instead it will return the original file. This is why you do not see the black border when you modify a hash - Sitecore simply returns the original image to you without resizing it.

    If you do not want black borders to be added to resized images, you can try one of the following solutions: