在循环中使用 Vue Js 修改图像 Url 值

Question

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

全图 url : www.example.com/img/full-image-001.jpg .

修改后的图像 url 我需要：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

更好的解决方案是创建滤镜并在图像上使用它。

改为 methods object create filters object with replace function:

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

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

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

你的组件数据中应该有 source 否则你会得到一个错误。这个来源应该是图片url

Modify Image Url Value with Vue Js in a Loop