Vue URL привязки не работает должным образом с Src изображения - PullRequest
Новая
       17

Vue URL привязки не работает должным образом с Src изображения

1 голос
/ 19 апреля 2020 
<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", и это сработало.

Теперь с событием @mouseover обработчик, который должен активировать функцию updateProduct(), у меня возникает ощущение, что я делаю что-то не так с обработчиком URL-адреса Vue, который должен извлекать variantImage (s), потому что когда я использую Vue, он передаёт изображение URL-адрес img/SocksG.jpg, а не ./assets/SocksG.jpg. Что я делаю не так?

1 Ответ

0 голосов
/ 19 апреля 2020

Добавьте свойство данных для 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, которое вы изменяете при наведении курсора мыши.

...