为什么array.slice在Safari上返回的值与Chrome中的值不同？

Question

我有几个div。点击后，我想设置一个单独的img元素的src作为用户刚刚点击的div的背景图像。

为此，我在用户点击其中一个div时运行此功能：

document.getElementById('image--roof').src = 
shingleButtons[i].style.backgroundImage.slice(5, -2);

这在Chrome中运行良好，但在Safari中，.slice（）函数返回不同的值。 在Chrome中，点击shingleButtons[i]会将#image--roof的src设置为http://example.com/example.jpg。在Safari中，它将其设置为ttp://example.com/example.jp。

以下是展示此问题的Codepen：https://codepen.io/anon/pen/eEjzyg

Answer 1

Chrome似乎会返回带有引号的网址，而Safari则不然。我将弄清楚如何添加数据属性并使用它。