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'
            }
        ]

    })

}

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

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中与源一起提供其他信息。

加载图像vue src url

1 个答案: