0

I'm putting together a pro-bono site for a friend based on the Bootstrap Agency template.

I'm in the portfolio section. I created a Portfolio.vue component and all works except when I dynamically load the image from the data inside this component.

Ex: works fine.

But if I try to do a :src={{obj.img}} I get an error.

Below is the code. Dynamic images drives me nuts in VueJS.

Thank you

<template> <section class="page-section bg-light" id="portfolio"> <div class="container"> <div class="text-center"> <h2 class="section-heading text-uppercase">Portfolio</h2> <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3> </div> <div class="row"> <div class="col-lg-4 col-sm-6 mb-4" v-for="(obj, key) in portfolioJSON" :key="key"> <div class="portfolio-item"> <a class="portfolio-link" data-toggle="modal" href="#portfolioModal1"> <div class="portfolio-hover"> <div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div> </div> <img class="img-fluid" src="../assets/img/portfolio/01-thumbnail.jpg" alt="" /> </a> <div class="portfolio-caption"> <div class="portfolio-caption-heading">{{obj.caption}}</div> <div class="portfolio-caption-subheading text-muted">{{obj.title}}</div> </div> </div> </div> </div> </div> </section> </template> <script> export default { data: () => ({ portfolioJSON: [ { img: '../assets/img/portfolio/01-thumbnail.jpg', caption: 'Threads', title: 'Illustration' }, { img: '../assets/img/portfolio/02-thumbnail.jpg', caption: 'Explore', title: 'Graphic Design' }, { img: '../assets/img/portfolio/03-thumbnail.jpg', caption: 'Finish', title: 'Identity' }, { img: '../assets/img/portfolio/04-thumbnail.jpg', caption: 'Lines', title: 'Branding' }, { img: '../assets/img/portfolio/05-thumbnail.jpg', caption: 'Southwest', title: 'Website Design' }, { img: '../assets/img/portfolio/06-thumbnail.jpg', caption: 'Window', title: 'Photography' } ] }) } </script> <style scoped> </style>
Improve this question

4 Answers 4

Reset to default
2

Remove the curly braces and just try :src="obj.img"

Mustaches cannot be used inside HTML attributes. Instead, use a v-bind directive:
<div v-bind:id="dynamicId"></div>

https://v2.vuejs.org/v2/guide/syntax.html#Attributes

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Why is using images in vue so difficult? <img class="img-fluid" :src="obj.img" alt="" /> didn't work.
Thank you though for reading the post. It got me on a path....
1 

<script> export default { data: () => ({ portfolioJSON: [ { img: require('@assets/img/portfolio/01-thumbnail.jpg'), caption: 'Threads', title: 'Illustration' }, { img: require('@assets/img/portfolio/02-thumbnail.jpg'), caption: 'Explore', title: 'Graphic Design' }, { img: require('@assets/img/portfolio/03-thumbnail.jpg'), caption: 'Finish', title: 'Identity' }, { img: require('@assets/img/portfolio/04-thumbnail.jpg'), caption: 'Lines', title: 'Branding' }, { img: require('@assets/img/portfolio/05-thumbnail.jpg'), caption: 'Southwest', title: 'Website Design' }, { img: require('@assets/img/portfolio/06-thumbnail.jpg'), caption: 'Window', title: 'Photography' } ] }) } </script>
 <template> <section class="page-section bg-light" id="portfolio"> <div class="container"> <div class="text-center"> <h2 class="section-heading text-uppercase">Portfolio</h2> <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3> </div> <div class="row"> <div class="col-lg-4 col-sm-6 mb-4" v-for="(obj, key) in portfolioJSON" :key="key"> <div class="portfolio-item"> <a class="portfolio-link" data-toggle="modal" href="#portfolioModal1"> <div class="portfolio-hover"> <div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div> </div> <img class="img-fluid" :src="obj.img" alt="" /> </a> <div class="portfolio-caption"> <div class="portfolio-caption-heading">{{obj.caption}}</div> <div class="portfolio-caption-subheading text-muted">{{obj.title}}</div> </div> </div> </div> </div> </div> </section> </template>

Improve this answer

Comments

1

Thank you to everyone.

The above answer got me on the path for a solution. After much digging, this is what I came up with...

<img class="img-fluid" :src="require(`@/assets/img/portfolio/${obj.img}`)" alt="">

Here is the full code...

<template> <section class="page-section bg-light" id="portfolio"> <div class="container"> <div class="text-center"> <h2 class="section-heading text-uppercase">Portfolio</h2> <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3> </div> <div class="row"> <div class="col-lg-4 col-sm-6 mb-4" v-for="(obj, key) in portfolioJSON" :key="key"> <div class="portfolio-item"> <a class="portfolio-link" data-toggle="modal" href="#portfolioModal1"> <div class="portfolio-hover"> <div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div> </div> <img class="img-fluid" :src="require(`@/assets/img/portfolio/${obj.img}`)" alt=""> </a> <div class="portfolio-caption"> <div class="portfolio-caption-heading">{{obj.caption}}</div> <div class="portfolio-caption-subheading text-muted">{{obj.title}}</div> </div> </div> </div> </div> </div> </section> </template> <script> export default { data: () => ({ portfolioJSON: [ { img: '01-thumbnail.jpg', caption: 'Threads', title: 'Illustration' }, { img: '02-thumbnail.jpg', caption: 'Explore', title: 'Graphic Design' }, { img: '03-thumbnail.jpg', caption: 'Finish', title: 'Identity' }, { img: '04-thumbnail.jpg', caption: 'Lines', title: 'Branding' }, { img: '05-thumbnail.jpg', caption: 'Southwest', title: 'Website Design' }, { img: '06-thumbnail.jpg', caption: 'Window', title: 'Photography' } ] }) } </script> <style scoped> </style>
Improve this answer

Comments

0

using relative path in your data object will not work most of the time because vue starts looking from the main project directory. starting from your source folder like this works for me.

./src/assets/img/portfolio/01-thumbnail.jpg

try it out

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.