Javascript 有没有办法在Vue中链接图像？

使用Vue单击图像时，链接到其他url时出现问题

它应该能够通过单击图像进行链接，但不起作用

如果有人能帮助我，我将不胜感激

我的代码如下所示

HTML

---

您的图像上不需要href。其他一切看起来都会奏效。我刚刚在一个代码笔中尝试了一个很好的例子。用一个更完整的例子写一支代码笔。这可能是一个CSS问题

您的代码：

应该是

---

您的代码不会那样工作，您应该调用
${obj.img}
，这是模板文本的新ES6语法

<div class="col-md-4 col-sm-4 sk-item" v-for="(obj, key) in portfolioJSON" :key="key">
          <img :src="`${obj.img}`" class="img-fluid" alt="" >
        </div>

希望这能帮助你：）

更新：

    export default {
      data() {
            return {
               portfolioJSON: [
               {
                    img: require('../assets/img/sukimatch/sukimatch.png'),
                    caption: 'Sukimatch',
                    title: 'WEBSITE, BANNER DESIGN',
                    url: "https://sukimatch-f887f.firebaseapp.com/"
                },
                {
                    img: require('../assets/img/portfolio/greencosjapan.png'),
                    caption: 'Greencosjapan',
                    title: 'WEBSITE',
                    url: "https://greencosjapan.com"
                }
            ]
}, computed: {
        imageArray: function() {
            return this.portfolioJSON.map(obj => obj.img)
        }
    }

}

这个解决方案对我有效。当资产文件夹位于公用文件夹内时

<div style="backgroundImage: url('~../../assets/images/image_1.jpg')">



否则，如果其位于src内部，请使用别名“@”


hi@Jess谢谢你的回复。我刚刚更新了上面的代码，我仍然不确定我的代码出了什么问题。我继续尝试解决它。删除除
a
标记和
img
标记之外的所有内容。很抱歉，我更新了一个错误的代码，但是我应该删除除了和img标签以外的所有代码吗？是的，你可以保留for循环，但是所有其他的div和东西，都要删除它们。至少做一个
a
标签的例子，该标签包装了
img
，然后慢慢地重新添加您删除的所有其他内容。这样你就可以知道是什么破坏了它。我希望你知道超链接是用
标签完成的，那么你试过把
img
包装在
a
标签里面吗？嗨@Marin谢谢你的回复。你的信息也很有用。然而，它仍然不起作用。我更新了上面的代码，正如您所说，我关闭了标签内的img标签。还添加了
：href=“
${obj.url}
”
。您是否看到任何错误的部分？嗯，在您提供的代码中，您错过了这个打开和关闭``:href=“
`${obj.url}`
”嗯，我已经像您提供的那样关闭了：href=“
${obj.url}
”。我现在有点迷路了。。但无论如何，tks！只是我放了：href=“
${obj.url}
”和关闭撇号在这里消失了。您能再次在vue组件中显示您的完整代码吗？您应该使用以下转义：\\
img: require('../assets/img/sukimatch/sukimatch.png'),
                caption: 'Sukimatch',
                title: 'WEBSITE, BANNER DESIGN',
                url: "https://sukimatch-f887f.firebaseapp.com/"

:title="`${obj.title}`"
:href="`${obj.url}`"
:img="`${obj.img}`"

    export default {
      data() {
            return {
               portfolioJSON: [
               {
                    img: require('../assets/img/sukimatch/sukimatch.png'),
                    caption: 'Sukimatch',
                    title: 'WEBSITE, BANNER DESIGN',
                    url: "https://sukimatch-f887f.firebaseapp.com/"
                },
                {
                    img: require('../assets/img/portfolio/greencosjapan.png'),
                    caption: 'Greencosjapan',
                    title: 'WEBSITE',
                    url: "https://greencosjapan.com"
                }
            ]
}, computed: {
        imageArray: function() {
            return this.portfolioJSON.map(obj => obj.img)
        }
    }

}

<div style="backgroundImage: url('~../../assets/images/image_1.jpg')">

<div style="backgroundImage: url('~@/assets/images/image_1.jpg')">