在shopify的商品展示页面 写一个js函数，函数作用是当鼠标结果商品展示的图片区域时，会展示一张1.2倍的新图片，请详细解释新展示的图片来源，如果新图片来源由后台添加 如何写此路径

新展示的图片来源通常是在后台上传的，存储在服务器上的图片。在前端页面上，我们可以通过 JavaScript 动态地改变图片的 URL 来实现图片的展示。

要实现当鼠标悬停在商品展示的图片区域时展示1.2倍的新图片，可以通过以下步骤实现：

1. 给商品展示的图片区域添加一个鼠标悬停事件监听器。
2. 在事件监听器中，获取当前商品展示图片的 URL。
3. 根据获取到的图片 URL，生成新的图片 URL，例如在原来的 URL 后面添加一个参数，表示图片尺寸变为原来的1.2倍。
4. 动态地将生成的新图片 URL 赋值给图片的 src 属性，实现图片的展示。

如果新图片来源由后台添加，可以在后台添加一个字段来存储新图片的 URL，然后在前端的 JavaScript 中读取该字段的值来实现图片的动态展示。

例如，后台添加了一个新字段叫做 "largeImageUrl" 来存储1.2倍的新图片的 URL，那么在 JavaScript 中，可以通过以下方式来获取并展示新图片：

// 获取商品展示图片的元素
const imgElem = document.querySelector('.product-image');

// 添加鼠标悬停事件监听器
imgElem.addEventListener('mouseover', function() {
  // 获取商品展示图片的 URL
  const originalUrl = imgElem.src;

  // 获取1.2倍的新图片的 URL
  const largeImageUrl = product.largeImageUrl;

  // 替换原来的图片 URL 为新图片的 URL
  imgElem.src = largeImageUrl;
});

其中，product 是后台传递给前端的商品数据对象，包含了商品的各种属性，包括新图片的 URL。