VueJS using images from data object

Question

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>

tony19 · Accepted Answer · 2022-07-15 01:15:52Z

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

edited Jul 15, 2022 at 1:15

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 5, 2021 at 0:07

Brandon

70.3k32 gold badges201 silver badges227 bronze badges

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

2 Comments

DonnaZ Over a year ago

Why is using images in vue so difficult? <img class="img-fluid" :src="obj.img" alt="" /> didn't work.

DonnaZ Over a year ago

Thank you though for reading the post. It got me on a path....

Passyah · Accepted Answer · 2023-02-01 04:45:26Z

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

DonnaZ · Accepted Answer · 2021-01-05 15:23:10Z

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>

DoudGaya · Accepted Answer · 2022-06-17 09:52:05Z

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

answered Jun 17, 2022 at 9:52

DoudGaya

1392 silver badges4 bronze badges

Collectives™ on Stack Overflow

VueJS using images from data object

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related