在 Vue.js 中生成动态 img 路径

Posted 2023-02-22

【中文标题】在 Vue.js 中生成动态 img 路径

【英文标题】：Generate dynamic img paths in Vue.js

【发布时间】：2018-03-11 22:30:00

【问题描述】：

Relevant codepen

我正在尝试生成动态图像路径，但我遗漏了一些东西。由于某种原因，该方法未在 img 标记中的 src 属性上执行。

这是 html：

<div id="app">

  <component v-bind:fruits="fruits" is="fruits-list"></component>

</div>

<template id="fruits-template">
  <div>
    <ul>
      <li v-for="fruit in fruits">
         fruit 
        <img src="imgName(fruit)" />
      </li>
    </ul>
  </div>
</template>

这里是相关的JS：

Vue.component('fruits-list', 
  template:'#fruits-template',
  props: ['fruits'],
  methods: 
    imgName: function(fruit)
      var imgPath = 'assets/images/' + fruit + '.jpg';
      return imgPath;
    
  
)

new Vue(
  el: '#app',
  data() 
    return 
      fruits: ['apple','pear','strawberry', 'peach']
    
  
)

我也尝试将src 绑定到img 标记，例如：

<img :src="getImageUrl(fruit)" />

但这根本不会导致任何渲染。在这样的实例中使用方法或计算属性会更好吗？

【问题讨论】：

你在哪里定义了getImageUrl方法？

使用方法应该可以很好地工作。尝试参考这个答案：***.com/questions/40491506/…

【参考方案1】：

在 html 中试试这个：

<img v-bind:src=imgName(fruit) />

当我在你的笔中更改它时，我看到对该 URL 的请求失败，其他水果的请求也类似：

Request URL:https://codepen.io/boomerang/iFrameKey-9b0f86ca-8c55-3b83-2d9c-3367ada2ac69/assets/images/apple.jpg

是否有您希望它们出现的那些水果的图像？我将imgName 方法更改为以下内容，苹果的图像加载到笔内：

imgName: function(fruit)
  if (fruit === 'apple') 
    return 'https://bestapples.com/wp-content/uploads/2015/10/apple-varieties.jpg'
   else 
    var imgPath = 'assets/images/' + fruit + '.jpg';
    return imgPath;        
  

【讨论】：

嘿，是的，这些图像并不是要在笔中实际呈现。我只需要弄清楚如何生成图像路径。这行得通，所以谢谢:)