Блог

Привет, я начинаю с VueJS, но у меня проблема, как подключить IMG src в моем шаблоне с записью URL в моем файле JSON. например, когда у меня есть какой-то продукт, и мне нравится показывать полный логотип для каждой статьи, мне нужно добавить URL, существующий в файле JSON, в src IMG.как я это делаю, пожалуйста, спасибо

   <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 amp; Plugins, built from the ground up to make your entire website convert more of your visitors into subscribers, customers amp; 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>
  

вот так.

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

Вы можете сделать следующее:

 <img :src="info.imglogo" alt="Media Aside" />
  

Объяснение:

Если вы используете переменные, а не текст, вам нужно добавить в свои HTML-атрибуты «:»

Вот рабочий код. Замените весь ваш файл vue на этот:

     <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 amp; Plugins, built from the ground up to make your entire website convert more of your visitors into subscribers, customers amp; 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>