Блог

Я создаю бесплатный сайт для друга на основе шаблона Bootstrap Agency.

Я в разделе портфолио. Я создал компонент Portfolio.vue, и все работает, за исключением случаев, когда я динамически загружаю изображение из данных внутри этого компонента.

Пример: работает нормально.

Но если я попытаюсь сделать:src={{obj.img}} Я получаю сообщение об ошибке.

Ниже приведен код. Динамические изображения сводят меня с ума в VueJS.

Спасибо

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

 

Спасибо всем.

Приведенный выше ответ привел меня к решению. После долгих поисков это то, что я придумал…

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

Вот полный код…

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

Удалите фигурные скобки и просто попробуйте :src="obj.img"

Усы нельзя использовать внутри атрибутов HTML. Вместо этого используйте директиву v-bind:
<div v-bind:id="dynamicId"></div>

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

использование относительного пути в вашем объекте данных не будет работать большую часть времени, потому что vue начинает поиск из основного каталога проекта. запуск из вашей исходной папки, как это работает для меня.

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

попробуйте