Question

我在链接到外部URL时遇到了很大的问题。我从json获取此网址，并连接到HTML标签。但是，单击图像时，我无法获取URL数据并无法链接到该URL。

HTML

string <- "aaaaaa"
if (!(nchar(string) %% 6)) {
  stop("String length is not divisible by 6!")
}
#> Error in eval(expr, envir, enclos): String length is not divisible by 6!

# If you need to return a vector of strings which are divisible by 6
strings <- c("aaaaaa", "bbbbbbb")
sapply(strings, function(x) nchar(x) %% 6 == 0, USE.NAMES = FALSE)
#> [1] TRUE FALSE

<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>

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是否对您的应用程序至关重要，但是this answer对此有更多说明。

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

1 个答案: