ho to bind img src in file json to my template - image

Question

Hi I am starting with VueJS but I have a problem how to connect IMG src in my template with URL writing in my file JSON .for example when I have some product and I like to show full logo for each article I need to add URL exists in file JSON to src IMG .how I do that please thank
<img src="info.imglogo" alt="Media Aside" />
<span v-text="info.logotitle"></span>
</template>
var infos = [
{
compteur: 1,
imglogo: "../imgs/theme.jpg",
logotitle: "Themeforest",
title: "Thrive Themes",
description:
"Conversion Focused WordPress Themes & Plugins, built from the ground up to make your entire website convert more of your visitors into subscribers, customers & clients.",
link1: "Visit ThriveTheme",
link2: "Read Review",
url: "../imgs/theme.jpg"
},
{
compteur: 2,
logotitle: "Elegant",
title: "Sub-Ex",
description: "com.goodreads.Tres-Zap",
link1: "Dr",
link2: "Honorable",
url: "../imgs/theme.jpg"
},
];
export default {
data() {
return {
infos: infos
};
},
name: "Home",
components: {}
};
</script>

Answer 1

like this.
<template>
<div v-for="(info, index) in infos" :key="index">
<img :src="info.imglogo" alt="Media Aside" v-if="info.imgLogo != undefined" />
<span v-text="info.logotitle"></span>
</div>
</template>

Answer 2

You can do as follow:
<img :src="info.imglogo" alt="Media Aside" />
Explanation:
If you use variables and not text, you have to prepend your HTML attributes by ":"
Here is a working code. Replace your entire vue file by this one:
<template>
<div>
<div v-for="info in infos" :key="info.compteur">
<img :src="info.imglogo" alt="Media Aside" />
<span v-text="info.logotitle"></span>
</div>
</div>
</template>
<script>
export default {
name: "Home",
components: {},
data() {
return {
infos: [
{
compteur: 1,
imglogo: "../imgs/theme.jpg",
logotitle: "Themeforest",
title: "Thrive Themes",
description:
"Conversion Focused WordPress Themes & Plugins, built from the ground up to make your entire website convert more of your visitors into subscribers, customers & clients.",
link1: "Visit ThriveTheme",
link2: "Read Review",
url: "../imgs/theme.jpg",
},
{
compteur: 2,
logotitle: "Elegant",
title: "Sub-Ex",
description: "com.goodreads.Tres-Zap",
link1: "Dr",
link2: "Honorable",
url: "../imgs/theme.jpg",
},
],
};
},
};
</script>