loops - Vue.js 迭代图像 src

Question

尝试遍历（imagePath，href）列表并使用 vue.js 显示它们。

图片的 href 值有效，点击时链接打开。虽然图片没有显示。

我的代码如下：

            <div
              v-for="(image,index) in socials"
              :key="index"
              >

                <a :href="image.href">

                  <v-avatar
                    size="48"
                    tile
                    >

                    <img
                      :src="image.src" 
                    />

                  </v-avatar>
                </a>

            </div>

  export default {
    name: 'App',

    data: () => ({
      socials: [
        {
          id:"1",
          src:"../assets/socials/discord.png",
          href:"https://discord.gg/link_to_discord"
        },
        {
          id:"2",
          src:"../assets/socials/telegram.png",
          href:"https://t.me//link_to_telegram"
        },
        {
          id:"3",
          src:"../assets/socials/medium.png",
          href:"https://medium.com/@link_to_medium"
        }
      ],

    })
  

  };

图像命名正确并且位于正确的目录中。如何更改我的代码以便正确显示图像？
这段代码属于页脚，所以模板&js在App.vue

解决方案

感谢@Nikola 和这个问题，我能够通过 getImgUrl 方法解决它。这是更新的代码：

模板

            <div
              v-for="image in socials"
              :key="image.id"
              >

                <a :href="image.href">

                  <v-avatar
                    size="48"
                    tile
                    >

                    <img
                      :src="getImgUrl(image.src)" 
                    />

                  </v-avatar>
                </a>

            </div>

脚本

<script>

  export default {
    name: 'App',

    data: function() {

      return {
        socials: [
          {
            id:"1",
            src:"socials/discord.png",
            href:"https://discord.gg/link_to_discord"
          },
          {
            id:"2",
            src:"socials/telegram.png",
            href:"https://t.me//link_to_telegram"
          },
          {
            id:"3",
            src:"socials/medium.png",
            href:"https://medium.com/@link_to_medium"
          }
        ],
      };
    },

    methods:{
      getImgUrl: function (path) { 
        return require('@/assets/' + path);
      }
    }
  

  };
  
</script>

标签： loopsvue.js

Answer 1

您可以制作方法：

export default {
    name: 'App',

    data: () => ({
      socials: [
        {
          id:"1",
          src:"socials/discord.png",
          href:"https://discord.gg/link_to_discord"
        },
        {
          id:"2",
          src:"socials/telegram.png",
          href:"https://t.me//link_to_telegram"
        },
        {
          id:"3",
          src:"socials/medium.png",
          href:"https://medium.com/@link_to_medium"
        }
      ],

    }),
    methods: {
      getImgUrl: function (path) { 
         return require('@/assets/' + path);
      }
    }

  };

然后在模板中调用该方法：

            <div
              v-for="(image,index) in socials"
              :key="index"
              >

                <a :href="image.href">

                  <v-avatar
                    size="48"
                    tile
                    >

                    <img
                      :src="getImgUrl(image.src)" 
                    />

                  </v-avatar>
                </a>

            </div>