[Vuejs]-VueJS using images from data object

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

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>

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