使用 Vue Js 循环修改图片 URL 值答案

【问题标题】：Modify Image Url Value with Vue Js in a Loop使用 Vue Js 循环修改图片 URL 值
【发布时间】：2019-05-13 10:59:47
【问题描述】：

我有一个带条件的简单循环。我想将完整的 url 修改为 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);
    }
},

【问题讨论】：

record 参数中有什么内容？请发布一个可行的例子
记录是等于'www.example.com/img/full-image-001.jpg'的var
我做了这个并且它的工作，但我是 vue 的新手，我不知道这是否是正确的方法.replaceLink (record) { let res = record.replace(".jpg", "-30x30.jpg"); console.log(res); }

【解决方案1】：

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

methods 对象使用替换功能创建 filters 对象：

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

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

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

您的组件数据中应该有 source，否则您会收到错误消息。这个来源应该是图片网址

【讨论】：