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 事件处理程序，我感觉我在应该获取的 Vue url 处理程序上做错了variantImage(s) 因为当我使用 Vue 开发工具时，图像 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="">

并从网址中删除路径：

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

现在图像 src 绑定到 this.image，您可以通过鼠标悬停更改它。

Vue 绑定 url 无法使用图像 src 正常运行

Vue bind url not functioning properly with image src

webpack

vue.js

vue-component

vuejs2

vue-cli