Question

我想让图像显示在我的项目中；但是，我无法解决。

我确实在寻找解决方案，但我尝试了一下，但对我而言却没有奏效。

这里有什么解决方案？预先感谢您的帮助。

这是html部分：

    <template>
            <div id="app">
            <div class="productListing">
                <div class="box effect1" :key="product.id" v-for="product in ProductFilter.slice(0,3)">
                    <h1>{{product.title}}</h1>
                    <img :src="product.img" alt="dd">
                </div>
            </div>
            </div>

            </template>
    vue js part 
    <script>
    export default {
      data: function () {
          return {
              userFilterKey: 'all',
      products:[
      {
        id: 1,
        title: "Google Pixel - Black",
        price: 10,
        company: "GOOGLE",
    status : "TopSell",
    img: "../../bg.jpeg"

      }

    ],
          }

      },
      computed: {
        ProductFilter() {
            return this[this.userFilterKey]
        },
        all() {
          return this.products
        },
        TopSell() {
          return this.products.filter((product) => product.status === "TopSell")
        },
        highRated() {
          return this.products.filter((product) => product.status === "HighRated")
        },
      }
    }
    // @ is an alias to /src
    </script>

再次感谢您的帮助。

Answer 1

假设您提供的图像路径正确，请改用require函数。

products: [
  {
    id: 1,
    title: "Google Pixel - Black",
    price: 10,
    company: "GOOGLE",
    status : "TopSell",
    img: require("../../bg.jpeg")
  }
],

如何在vuejs中正确添加图像

1 个答案: