Vue 绑定 url 无法与图像 src 一起正常工作

Question

<template>
  <div id="app">
    <b-container >
      <b-row>
        <div class="product">
          <img src='./assets/SocksG.jpg' alt="">
        </div>
        <div class="cart">
          <button @click="addToCart">Add To Cart</button>
          <br>
          <p>Cart({{cart}})</p>
        </div>
        <div v-for="variant in variants" 
          :key="variant.variantId"
          class="color-box"
          :style="{backgroundColor:variant.variantColor}"
          @mouseover ="updateProduct(variant.variantImage)"
          >
        </div>
      </b-row>
    </b-container>
  </div>
</template>

export default {
  name: 'App',
  data() {
    return {
      cart: 0,
      variants: [{
        variantId: 2234,
        variantColor: 'green',
        variantImage: './assets/SocksG.jpg'
      }, {
        variantId: 2235,
        variantColor: 'blue',
        variantImage: './assets/SocksB.jpg'
      }]
    }
  },
  methods: {
    addToCart() {
      this.cart += 1
    },
    updateProduct(variantImage) {
      this.image = variantImage
    }
  }
}

起初我将:src 应用到socksG 图像，在脚本中我不得不使用img:require("./assets/SocksG.jpg"，它成功了。

现在有了应该激活 updateProduct() 函数的 @mouseover 事件处理程序，我感觉我在使用应该获取 variantImage(s) 的 Vue url 处理程序做错了，因为当我使用 Vue devtools 图像 url 是 img/SocksG.jpg 而不是 ./assets/SocksG.jpg。我做错了什么？

Answer 1

为image添加数据属性：

return {
   image: ...,  // Set some initial image filename here
   cart: 0,
   ...
}

像这样使用require：

<img :src="require('@/assets/' + this.image)" alt="">

并从 url 中删除路径：

variantImage: 'SocksG.jpg'
...
variantImage: 'SocksB.jpg'

现在图像src 已绑定到this.image，您将通过鼠标悬停对其进行更改。