VueJS使用数据对象中的图像

Question

我正在为一个朋友建立一个基于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>

Answer 1

去掉大括号，只需尝试:src="obj.img"

Mustaches不能在HTML属性中使用。相反，使用v-bind指令：
<div v-bind:id="dynamicId"></div>

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

Answer 2

感谢大家。

上面的答案让我找到了解决方案。经过大量挖掘，这就是我的想法。。。

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

Answer 3

在数据对象中使用相对路径在大多数情况下都不起作用，因为vue从主项目目录开始查找。像这样从你的源文件夹开始对我有效。

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

试用

Answer 4

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