使用Vue从json数据链接到外部url

Question

我在链接到外部url时遇到了一个大问题。我从json获取的这个url连接到HTML标记。但是，当我单击图像时，我无法获取url数据并链接到该url。

超文本标记语言

<section class="bg-light page-section" id="portfolio">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center"><br>
          <h2 class="section-heading text-uppercase works-text">Works</h2>
          <h3 class="section-subheading text-muted">Selected work that has been created with the help of many.</h3>
        </div>
      </div>
      <div class="row">
       <div class="col-md-4 col-sm-6 portfolio-item" v-for="(obj, key) in portfolioJSON" :key="key"  >
          <a :href="`${obj.url}`" class="portfolio-link" data-toggle="modal" target="_blank" >
            <div class="portfolio-hover">
              <div class="portfolio-hover-content">

              </div>
            </div>
            <img :src="`${obj.img}`" class="img-fluid" >
          </a>
        </div>

      </div>
    </div>
  </section>

export default {
    data() {
      return {
        portfolioJSON: [
           {
                img: require('../assets/img/sukimatch/sukimatch.png'),
                caption: 'Sukimatch',
                title: 'WEBSITE, BANNER DESIGN',
                url: "https://sukimatch-f887f.firebaseapp.com/"
            }     ]
    }
    }
}
```

Answer 1

你的代码，在原则上，工作正常，但是你所做的img标记没有意义。

对于SO问题，最好使用一个小的、可重复的例子。我拿走了你的代码，让这把小提琴帮了大忙。我在这里放了一个：

https://jsfiddle.net/79qLzv58/1/

我使用的数据是：

    portfolio: [{
        img: 'https://dummyimage.com/300x200/000/fff&text=one',
        caption: 'Caption 1',
        title: 'Title 1',
        url: "https://destination-1.com/"
      },
      {
        img: 'https://dummyimage.com/300x200/000/fff&text=two',
        caption: 'Caption 2',
        title: 'Title 2',
        url: "https://destination-2.com"
      }
    ]

在您的情况下，您不必像这样使用模板字符串

<a :href="`${obj.url}`">

但我们可以做到：

<a :href="obj.url">

不过，如果您正在进行任何形式的连接或修改URL，那么模板字符串是很方便的。

我不确定img数据URL是否对你的应用程序至关重要，但这个答案对此有更多的说明。