javascript - 加载图像 vue src url

Question

我在 vue.js 中加载图像时遇到问题

我试图加载我的图像，但它不起作用。如果有人有答案请教我。

这是html源代码

<div class="col-md-4 col-sm-6 portfolio-item" v-for="(obj, key) in portfolioJSON" :key="key">
          <a class="portfolio-link" data-toggle="modal" href="#portfolioModal2">
            <div class="portfolio-hover">
              <div class="portfolio-hover-content">
                <i class="fas fa-plus fa-3x"></i>
              </div>
            </div>
            <img v-for="image in imageArray" :src="image" class="img-fluid" alt="">
          </a>
          <div class="portfolio-caption">
            <h4>{{ obj.caption }}</h4>
            <p class="text-muted">{{ obj.title }}</p>
          </div>
        </div>

这是js代码

export default {
  computed: {
    imageArray: function() {
        return this.portfolioJSON.map(obj => obj.img)
    }
},
    data: () => ({
        portfolioJSON: [
            {
                img: '/something/random/img.jpg',
                caption: 'test',
                title: 'test1'
            },
            {
                img: '/something/random/img.jpg',
                caption: 'Explore',
                title: 'test2'
            }
        ]

    })

}

它应该加载图像并显示它，但它不起作用。现在它只渲染一张图片。

标签： javascriptvue.js

Answer 1

您的portfolioJSON变量是一个对象数组。src接受单个图像的路径。

如果你想渲染数组中的所有图像，你应该将它添加到你的 Vue 实例中：

computed: {
    imageArray: function() {
        return this.portfolioJSON.map(obj => obj.img)
    }
}

此代码将根据您的数组生成一个路径portfolioJSON数组。

然后，在您的 HTML 中，将其替换为：

<img :src="portfolioJSON" class="img-fluid" alt="">

有了这个：

<img v-for="image in imageArray" :src="image" class="img-fluid" alt=""></img>

<img>这将为数组中的每个图像渲染一个portfolioJSON（并且在使用 Vue 时您不应该忘记关闭标签，它可能会在稍后回来咬您）。

或者您可能希望使用单个<img>元素srcset而不是src，在这种情况下，您应该使用这段 HTML：

<img :srcset="imageArray.join(',')" class="img-fluid" alt=""></img>

请注意，在这种情况下，您可能希望在srcset源旁边提供其他信息。