如何将文件 json 中的 img src 绑定到我的模板

Question

您好，我从 VueJS 开始，但我遇到了一个问题，如何将我的模板中的 IMG src 与我的文件 JSON 中写入的 URL 连接起来。例如，当我有一些产品并且我想为我需要的每篇文章显示完整的徽标时将文件 JSON 中存在的 URL 添加到 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 & 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

像这样。

 <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

你可以这样做：

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