vue3 引用圖片的坑要用 new URL('./img.png', import.meta.url).href 而不是 require

https://cn.vitejs.dev/guide/assets#new-url-url-import-meta-url

https://blog.51cto.com/u_15105778/6989918
因為 require 是 webpack 提供的一種加載能力，而 vue3 是搭配 vite 的，所以這邊應該使用 vite 提供的靜態資源載入方法。
https://vitejs.dev/guide/assets#new-url-url-import-meta-url

具體來說程式碼長這樣：

<template>
  <div class="product-wrapper">
    <img :src="getSrc(product.image.mobile)" />
    <div class="new-product">NEW PRODUCT</div>
    <div class="product-name">{{ product.name }}</div>
    <div class="product-price">{{ product.price }}</div>
  </div>
  <div class="product-desc">{{ product.description }}</div>
</template>

<script setup>
import { defineProps } from "vue";
const { product } = defineProps(["product"]);

//https://cn.vitejs.dev/guide/assets#new-url-url-import-meta-url
const getSrc = (imageName) => {
  const image = new URL("../../" + `${imageName}`, import.meta.url).href;
  return image;
};
</script>