urls used in css background images should be encoded

[shefalijoshi]

Summary

When urls used for the backgroundImage property of css have special characters (like spaces), the urls don't work.

Expected vs Current Behavior

Urls with spaces and special characters should work for css background images

Steps to Reproduce

1. For imagery layers, use a url where the file name / url has a space in it. (eg. this_is_an_image url.png)
2. Toggle the layer on in openmct
3. Observe that the layer is not displayed

Environment

• Open MCT Version: 4.1.x
• Deployment Type: all
• OS: all
• Browser: all

Impact Check List

• Data loss or misrepresented data?
• Regression? Did this used to work or has it always been broken?
• Is there a workaround available?
• Does this impact a critical component?
• Is this just a visual bug with no functional impact?
• Does this block the execution of e2e tests?
• Does this have an impact on Performance?

Additional Information

[shefalijoshi]

Testing instructions:
Ensure that the following components work correctly:

1. Display layout images - Use an image URL with a space in it.
2. Imagery View

• The main image
• Imagery layers (overlays)
• Thumbnail images

3. Object styles editor - Look at the styles for an image layout item in the inspector where the image layout item URL has a space in it.
4. AppLogo