循环使用Vue Js修改图片网址值

Question

我有一个带条件的简单循环。我想将完整网址修改为60x60像素的图像版本。

完整图片网址：www.example.com/img/full-image-001.jpg。

我需要的修改后的图片网址：www.example.com/img/full-image-001-60x60.jpg。

<template v-else-if="column === 'product_img'">
     <img :src="replaceLink.columnValue" alt="" height="60" width="60">
</template>

方法功能：

methods : {
    replaceLink (record) { //logic 
    }
}

---

编辑： 这是正确的方法吗？

methods: {
    replaceLink (record) {
        let res = record.replace(".jpg", "-60x60.jpg");
        console.log(res);
    }
},

Answer 1

更好的解决方案是创建过滤器并将其用于图像。

代替方法对象创建具有替换功能的 filters 对象：

filters: {
  replaceLink: function(value) {
    if (!value) return '';
    return value.replace('.jpg', '-60x60.jpg');
  }
}

现在在HTML中，您可以像这样使用它：

<img :src="source | replaceLink" />

您的组件数据中应该有源，否则会出现错误。该来源应为图片网址