我试图从我的JSON文件在VUE渲染图像，但它不工作是使一个产品详细信息页面和显示每个产品的详细信息取决于该页面上选择的一个...所以这是该页面的代码。我已经尝试使用要求功能来加载图像，但它仍然没有。图像是在我的图像文件夹下的资产文件夹...这里是代码..

`<template>
  <Header />
  <div class="title">

    <h1>Product Description</h1>
  </div>

  <div class="container mb-5">
    <hr />

    <div class="card">
      <div class="row">
        <aside class="col-sm-5 border-right">
          <article class="gallery-wrap">
            <div class="img-big-wrap">
              <div>
                <img :src="require(`../assets/images/${product.image}`)" />
              </div>
            </div>
            <!-- slider-product.// -->

            <!-- slider-nav.// -->
          </article>
          <!-- gallery-wrap .end// -->
        </aside>
        <aside class="col-sm-7">
          <article class="card-body p-5">
            <h3 class="title mb-3">{{ product.name }}</h3>

            <p class="price-detail-wrap">
              <span class="price h3 text-warning">
                <span class="currency">US $</span
                ><span class="num">{{ product.price }}</span>
              </span>
            </p>
            <!-- price-detail-wrap .// -->
            <dl class="item-property">
              <dt>Description</dt>
              <dd>
                <p>
                  {{ product.description }}
                </p>
              </dd>
            </dl>
            <dl class="param param-feature">
              <dt>Model#</dt>
              <dd>12345611</dd>
            </dl>
            <!-- item-property-hor .// -->
            <dl class="param param-feature">
              <dt>Color</dt>
              <dd>Black and white</dd>
            </dl>
            <!-- item-property-hor .// -->
            <dl class="param param-feature">
              <dt>Delivery</dt>
              <dd>Russia, USA, and Europe</dd>
            </dl>
            <!-- item-property-hor .// -->

            <hr />
            <div class="row">
              <div class="col-sm-5">
                <dl class="param param-inline">
                  <dt>Quantity:</dt>
                  <dd>
                    <select
                      class="form-control form-control-sm"
                      style="width: 70px"
                    >
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                    </select>
                  </dd>
                </dl>
                <!-- item-property .// -->
              </div>
              <!-- col.// -->
              <div class="col-sm-7">
                <dl class="param param-inline">
                  <dt>Size:</dt>
                  <dd>
                    <label class="form-check form-check-inline">
                      <input
                        class="form-check-input"
                        type="radio"
                        name="inlineRadioOptions"
                        id="inlineRadio2"
                        value="option2"
                      />
                      <span class="form-check-label">SM</span>
                    </label>
                    <label class="form-check form-check-inline">
                      <input
                        class="form-check-input"
                        type="radio"
                        name="inlineRadioOptions"
                        id="inlineRadio2"
                        value="option2"
                      />
                      <span class="form-check-label">MD</span>
                    </label>
                    <label class="form-check form-check-inline">
                      <input
                        class="form-check-input"
                        type="radio"
                        name="inlineRadioOptions"
                        id="inlineRadio2"
                        value="option2"
                      />
                      <span class="form-check-label">XXL</span>
                    </label>
                  </dd>
                </dl>
                <!-- item-property .// -->
              </div>
              <!-- col.// -->
            </div>
            <!-- row.// -->
            <hr />

            <a href="#" class="btn btn-lg btn-outline-primary text-uppercase">
              <i class="fas fa-shopping-cart"></i> Add to cart
            </a>
          </article>
          <!-- card-body.// -->
        </aside>
        <!-- col.// -->
      </div>
      <!-- row.// -->
    </div>
    <!-- card.// -->
  </div>
  <!--container.//-->
  <Footer />
</template>
<script>
import Header from "./Header";
import axios from "axios";
import Footer from "./Footer";
export default {
  name: "ProductDetail",
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      product: {},
    };
  },

  async mounted() {
    let result = await axios.get(
      "http://localhost:3000/products/" + this.$route.params.id
    );
    this.product = result.data;
  },
};
</script>

<style scoped>
/* Import Font Dancing Script */
@import url(https://fonts.googleapis.com/css?family=Dancing+Script);
.title {
  font-family: "Dancing Script", cursive;
  padding-top: 15px;
  left: 45%;
}
body {
  font-family: Arial;
}
</style>`

{"products": [{"id": 1,"name": "shirt","price": "40","description": "Product shirt","image": "f2.jpg","reviews": [{ " id": 1, " comment": "Good product" },{ "id": 2, "comment": "Excellent product" },{ " id": 3, "comment": "Average product" }]},{"id": 2,"name": "shirt","price": "40","description": "Product shirt","image": "f1.jpg","reviews": [``{ " id": 3, "comment": "Average product" }]}]}
I expect the image to be rendered on my product detail page...everything is being rendered except from the image