文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Vue :src不是在显示图像，而是在DOM中显示

问Vue :src不是在显示图像，而是在DOM中显示
EN

Stack Overflow用户
提问于 2022-04-01 09:57:22
回答 1查看 117关注 0票数 0
代码语言：javascript
复制
<template>
  <div>
    <Header></Header>
    <div class=" flex justify-center items-center" v-if="!item && !product">
        <div class="animate-spin rounded-full h-20 w-20 border-b-2 border-sky-500"></div>
    </div>
    <div v-else>
        <div class="grid md:grid-cols-2 my-5">
                <div>
                    <img class="w-full h-52 md:h-96 md:w-96 mx-auto " :src="product.imagePath" alt="Extol Coffee">
                </div>
                <div class="mr-16 ">
                    <div class="grid grid-cols-4 text-5xl mb-3">
                        <p class="inline col-span-4">{{product.name}} - {{item.quantity_type}}</p>
                    </div>
                    <div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
                        <p class="inline col-span-1">Region</p>
                        <p class="inline text-justify col-span-3">{{product.region}}</p>
                    </div>
                    <div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
                        <p class="inline col-span-1">Growing Altitude</p>
                        <p class="inline text-justify col-span-3">{{product.growing_altitude}}</p>
                    </div>
                    <div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
                        <p class="inline col-span-1">Arabica Variety</p>
                        <p class="inline text-justify col-span-3">{{product.arabica_variety}}</p>
                    </div>
                    <div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
                        <p class="inline col-span-1">Milling Process</p>
                        <p class="inline text-justify col-span-3">{{product.milling_process}}</p>
                    </div>
                    <div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
                        <p class="inline col-span-1">Aroma</p>
                        <p class="inline text-justify col-span-3">{{product.aroma}}</p>
                    </div>
                    <div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
                        <p class="inline col-span-1">Flavor</p>
                        <p class="inline text-justify col-span-3">{{product.flavor}}</p>
                    </div>
                    <div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
                        <p class="inline col-span-1">Body</p>
                        <p class="inline text-justify col-span-3">{{product.body}}</p>
                    </div>
                    <div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
                        <p class="inline col-span-1">Acidity</p>
                        <p class="inline text-justify col-span-3">{{product.acidity}}</p>
                    </div>
                    <div class="grid grid-cols-4 mt-4 p-2">
                        <p class="inline col-span-1">Price</p>
                        <p class="inline text-justify col-span-3 text-2xl">${{item.price}}</p>
                    </div>
                    <div class="p-2 grid grid-cols-4">
                        <p class="inline col-span-1">Quantity</p>
                        <input class="w-32 h-10 rounded-md border-2 col-span-2 bg-white" type="number" name="quantity" id="quantity" v-model="quantity">
                    </div>
                    <div class="p-2">
                        <button class=" block bg-transparent border-sky-500 border-2 rounded-md w-52 h-10 mx-auto" v-on:click="addToCart()">     
                            <span>Add to Cart</span>
                        </button>
                    </div>
                </div>
            </div>
    </div>
  </div>
</template>

<script>
import Header from "./Header.vue";
export default {
  name: "ViewItem",
  data(){
      return{
          product:null,
          quantity:0,
      }
  },
  components:{
      Header,
  },
  methods:{
      addToCart(){
          var itemToCart ={
            product: this.product,
            item: this.item,
            quantity: +this.quantity,
          };
          if(itemToCart.quantity>0){
            this.$store.dispatch("addItemToCart",itemToCart).then(r=>{}).catch(e=>console.log(e));
          }
      }
  },
  computed:{
      item(){
        var item = this.$store.getters.getProductQuantities.find(item => item.id == this.$route.params.id);
        this.product= this.$store.getters.getProducts.find(product => product.id == item.product_id); 
        return item;
      },

  }
};
</script>

<style></style>

<template>
  <div>
    <Header></Header>
    <div class=" flex justify-center items-center" v-if="!item && !product">
        <div class="animate-spin rounded-full h-20 w-20 border-b-2 border-sky-500"></div>
    </div>
    <div v-else>
        <div class="grid md:grid-cols-2 my-5">
                <div>
                    <img class="w-full h-52 md:h-96 md:w-96 mx-auto " :src="product.imagePath" alt="Extol Coffee">
                </div>
                <div class="mr-16 ">
                    <div class="grid grid-cols-4 text-5xl mb-3">
                        <p class="inline col-span-4">{{product.name}} - {{item.quantity_type}}</p>
                    </div>
                    <div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
                        <p class="inline col-span-1">Region</p>
                        <p class="inline text-justify col-span-3">{{product.region}}</p>
                    </div>
                    <div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
                        <p class="inline col-span-1">Growing Altitude</p>
                        <p class="inline text-justify col-span-3">{{product.growing_altitude}}</p>
                    </div>
                    <div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
                        <p class="inline col-span-1">Arabica Variety</p>
                        <p class="inline text-justify col-span-3">{{product.arabica_variety}}</p>
                    </div>
                    <div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
                        <p class="inline col-span-1">Milling Process</p>
                        <p class="inline text-justify col-span-3">{{product.milling_process}}</p>
                    </div>
                    <div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
                        <p class="inline col-span-1">Aroma</p>
                        <p class="inline text-justify col-span-3">{{product.aroma}}</p>
                    </div>
                    <div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
                        <p class="inline col-span-1">Flavor</p>
                        <p class="inline text-justify col-span-3">{{product.flavor}}</p>
                    </div>
                    <div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
                        <p class="inline col-span-1">Body</p>
                        <p class="inline text-justify col-span-3">{{product.body}}</p>
                    </div>
                    <div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
                        <p class="inline col-span-1">Acidity</p>
                        <p class="inline text-justify col-span-3">{{product.acidity}}</p>
                    </div>
                    <div class="grid grid-cols-4 mt-4 p-2">
                        <p class="inline col-span-1">Price</p>
                        <p class="inline text-justify col-span-3 text-2xl">${{item.price}}</p>
                    </div>
                    <div class="p-2 grid grid-cols-4">
                        <p class="inline col-span-1">Quantity</p>
                        <input class="w-32 h-10 rounded-md border-2 col-span-2 bg-white" type="number" name="quantity" id="quantity" v-model="quantity">
                    </div>
                    <div class="p-2">
                        <button class=" block bg-transparent border-sky-500 border-2 rounded-md w-52 h-10 mx-auto" v-on:click="addToCart()">     
                            <span>Add to Cart</span>
                        </button>
                    </div>
                </div>
            </div>
    </div>
  </div>
</template>

<script>
import Header from "./Header.vue";
export default {
  name: "ViewItem",
  data(){
      return{
          product:null,
          quantity:0,
      }
  },
  components:{
      Header,
  },
  methods:{
      addToCart(){
          var itemToCart ={
            product: this.product,
            item: this.item,
            quantity: +this.quantity,
          };
          if(itemToCart.quantity>0){
            this.$store.dispatch("addItemToCart",itemToCart).then(r=>{}).catch(e=>console.log(e));
          }
      }
  },
  computed:{
      item(){
        var item = this.$store.getters.getProductQuantities.find(item => item.id == this.$route.params.id);
        this.product= this.$store.getters.getProducts.find(product => product.id == item.product_id); 
        return item;
      },

  }
};
</script>

<style></style>

<div>
                    <img class="w-full h-52 md:h-96 md:w-96 mx-auto " :src="product.imagePath" alt="Extol Coffee">
                </div>

<template>
  <div>
    <Header></Header>
    <div class=" flex justify-center items-center" v-if="!item && !product">
        <div class="animate-spin rounded-full h-20 w-20 border-b-2 border-sky-500"></div>
    </div>
    <div v-else>
        <div class="grid md:grid-cols-2 my-5">
                <div>
                    <img class="w-full h-52 md:h-96 md:w-96 mx-auto " :src="product.imagePath" alt="Extol Coffee">
                </div>
                <div class="mr-16 ">
                    <div class="grid grid-cols-4 text-5xl mb-3">
                        <p class="inline col-span-4">{{product.name}} - {{item.quantity_type}}</p>
                    </div>
                    <div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
                        <p class="inline col-span-1">Region</p>
                        <p class="inline text-justify col-span-3">{{product.region}}</p>
                    </div>
                    <div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
                        <p class="inline col-span-1">Growing Altitude</p>
                        <p class="inline text-justify col-span-3">{{product.growing_altitude}}</p>
                    </div>
                    <div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
                        <p class="inline col-span-1">Arabica Variety</p>
                        <p class="inline text-justify col-span-3">{{product.arabica_variety}}</p>
                    </div>
                    <div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
                        <p class="inline col-span-1">Milling Process</p>
                        <p class="inline text-justify col-span-3">{{product.milling_process}}</p>
                    </div>
                    <div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
                        <p class="inline col-span-1">Aroma</p>
                        <p class="inline text-justify col-span-3">{{product.aroma}}</p>
                    </div>
                    <div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
                        <p class="inline col-span-1">Flavor</p>
                        <p class="inline text-justify col-span-3">{{product.flavor}}</p>
                    </div>
                    <div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
                        <p class="inline col-span-1">Body</p>
                        <p class="inline text-justify col-span-3">{{product.body}}</p>
                    </div>
                    <div class="grid grid-cols-4 border-b-2 border-gray-300 p-2">
                        <p class="inline col-span-1">Acidity</p>
                        <p class="inline text-justify col-span-3">{{product.acidity}}</p>
                    </div>
                    <div class="grid grid-cols-4 mt-4 p-2">
                        <p class="inline col-span-1">Price</p>
                        <p class="inline text-justify col-span-3 text-2xl">${{item.price}}</p>
                    </div>
                    <div class="p-2 grid grid-cols-4">
                        <p class="inline col-span-1">Quantity</p>
                        <input class="w-32 h-10 rounded-md border-2 col-span-2 bg-white" type="number" name="quantity" id="quantity" v-model="quantity">
                    </div>
                    <div class="p-2">
                        <button class=" block bg-transparent border-sky-500 border-2 rounded-md w-52 h-10 mx-auto" v-on:click="addToCart()">     
                            <span>Add to Cart</span>
                        </button>
                    </div>
                </div>
            </div>
    </div>
  </div>
</template>

<script>
import Header from "./Header.vue";
export default {
  name: "ViewItem",
  data(){
      return{
          product:null,
          quantity:0,
      }
  },
  components:{
      Header,
  },
  methods:{
      addToCart(){
          var itemToCart ={
            product: this.product,
            item: this.item,
            quantity: +this.quantity,
          };
          if(itemToCart.quantity>0){
            this.$store.dispatch("addItemToCart",itemToCart).then(r=>{}).catch(e=>console.log(e));
          }
      }
  },
  computed:{
      item(){
        var item = this.$store.getters.getProductQuantities.find(item => item.id == this.$route.params.id);
        this.product= this.$store.getters.getProducts.find(product => product.id == item.product_id); 
        return item;
      },

  }
};
</script>

<style></style>

图像存在并在其他组件中输出，但在此组件中不存在。我使用item.product_id从状态中获取产品对象。它获取产品，并填充该区域，生长altitude.....etc和图像路径。在DOM中，图像路径被正确填充，但它显示“无法加载图像”错误，然后显示alt文本“赞美咖啡”。该图像路径工作良好，因为其他组件使用它并显示在那里的图像。

​

​

动态显示图像

vue.js
tailwind-css
laravel-vue
laravel
EN

回答 1

Stack Overflow用户

发布于 2022-04-01 15:43:28

您是否检查了控制台并看到没有对图像的错误请求？如果全部清除，那么这个‘w-满h-52 md:h-96 md:W-96MX-auto’类有什么问题，我建议清除这些类并查看结果。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/71705098

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档