I have a problem to link to other url when I click image by using Vue.

It suppose to be able to link by clicking images but it does not work.

If there are anyone who can help me I am very appreciated.

My code looks like below.

HTML

<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 class="portfolio-link" data-toggle="modal" target = "_blank" v-bind:href="`${obj.url}`">
            <div class="portfolio-hover">
              <div class="portfolio-hover-content">
                <!-- <! <i class="fas fa-plus fa-3x"></i> -->
              </div>
            </div>
            <img :src="`${obj.img}`" class="img-fluid" >
          </a>
          <div class="portfolio-caption works-text">
            <h4 class="works-text">{{ obj.caption }}</h4>
            <p class="text-muted works-text">{{ obj.title }}</p>
          </div>
        </div>

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

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

}

I have a problem to link to other url when I click image by using Vue.

It suppose to be able to link by clicking images but it does not work.

If there are anyone who can help me I am very appreciated.

My code looks like below.

HTML

<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 class="portfolio-link" data-toggle="modal" target = "_blank" v-bind:href="`${obj.url}`">
            <div class="portfolio-hover">
              <div class="portfolio-hover-content">
                <!-- <! <i class="fas fa-plus fa-3x"></i> -->
              </div>
            </div>
            <img :src="`${obj.img}`" class="img-fluid" >
          </a>
          <div class="portfolio-caption works-text">
            <h4 class="works-text">{{ obj.caption }}</h4>
            <p class="text-muted works-text">{{ obj.title }}</p>
          </div>
        </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./"
            },
            {
                img: require('../assets/img/portfolio/greencosjapan.png'),
                caption: 'Greencosjapan',
                title: 'WEBSITE',
                url: "https://greencosjapan."
            }
        ]
    }
    }, puted: {
    imageArray: function() {
        return this.portfolioJSON.map(obj => obj.img)
    },
    urlArray: function() {
        return this.portfolioJSON.map(obj => obj.url)
    }
},

}

• javascript
• json
• vue.js

• I hope you know hyperlinking is done with <a> tag, so did you try wrapping img inside a tag? – Mat J Commented Nov 17, 2019 at 7:05

3 Answers 3

your code won't work like that, you should call ${obj.img} ,this is the new ES6 syntax for template literals

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

You can read more about it here : https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Template_literals

It's very useful , you should use it in all places in your code, where you can do it.

img: require('../assets/img/sukimatch/sukimatch.png'),
                caption: 'Sukimatch',
                title: 'WEBSITE, BANNER DESIGN',
                url: "https://sukimatch-f887f.firebaseapp./"

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

Hope this could helps you :)

Update:

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

}

You don't need an href on your image. Everything else looks like it would work. I just tried an example in a codepen that works fine. Post a code pen with a more plete example. It might be a CSS problem.

Your code: <img :src="obj.img" class="img-fluid" href="obj.url">

should be

<img :src="obj.img" class="img-fluid"

This solution worked for me. When your asset folder is inside the public folder.

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

Otherwise if its inside the src use the alias "@"

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