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

Posted 2023-02-23

【中文标题】Vue 绑定 url 无法与图像 src 一起正常工作

【英文标题】：Vue bind url not functioning properly with image src

【发布时间】：2020-08-02 03:54:41

【问题描述】：

<template>
  <div id="app">
    <b-container >
      <b-row>
        <div class="product">
          <img src='./assets/SocksG.jpg' >
        </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。我做错了什么？

【参考方案1】：

为image添加数据属性：

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

像这样使用require：

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

并从 url 中删除路径：

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

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

【讨论】：

mouseover 事件激活 updateProduct 函数，当鼠标移过两个不同的颜色框时，该函数负责切换图像

鼠标悬停事件设置this.image，这是一个1）当前未声明和2）未在模板中使用的变量。答案告诉你如何解决这个问题。

谢谢@Dan 我真是个白痴，我几乎编辑了整篇文章，因为我认为你的回答不正确，然后我试了一下，它奏效了。但是为什么它不能按预期工作呢？ <img :src="imageSrc"> 在 vue 文档网站上 [vuejs.org/v2/api/#v-bind]

不客气。我认为这种情况经常发生，抓住它的方法。当您在 Vue CLI 中使用项目图像时，Webpack 会在实时版本中重命名它们。如果您使用模板中的字符串，CLI 会在使用 img src 时隐形修复此问题，但是当您绑定时，它需要 require 才能获得正确的名称。