时间戳

首页 > 解决方案 > 我不能用 vue.js 上传页面，我哪里出错了？

javascript - 我不能用 vue.js 上传页面，我哪里出错了？

问题描述

<template>
   
    <form class="questionnaire-result" action="#">
        <h1 class="h1">Here are your result!</h1>
        <div class="grid-container">
            <h2 class="sub-club"> Sub-Club</h2>
            <h2 class="score"> Score</h2>
            <h2 class="join-que"> Want to Join?</h2>
            <div class="sub-club-section " v-for="(subclub) in subclubs" :key="subclub.id">
                    <div class="responsive">
                        <div class="gallery">
                            <img class="image" :src="subclub.path">
                            <div class="desc">{{subclub.name}}</div>
                        </div>
                        </div>
                    <h3 v-if="subclub.score>50" class="score-result" style="color:#0cf12a ">{{subclub.score}}%</h3>
                    <h3 v-else class="score-result" style="color:red ">{{subclub.score}}%</h3>
                    <div v-if="subclub.score>50">
                        <input class="join-btn option-input " type="checkbox" v-bind:value="subclub.name"  v-model="selected_subclubs" >
                    </div>
            </div>
     {{selected_subclubs}}
        <button @click=" goToHomePage()" class="button "><span> JOIN </span></button>
      
        </div>
    </form>

    </div>
  
</template>

<script>
export default {
    name:"QuestionnaireResult",
    data(){
      
        return{
            selected_subclubs:[],
            subclubs:[
             { 
                id:1,
                name:"Yoga",
                score:70,
                path:"@/assets/sub-clubs-images/Yoga_mini.jpeg",
              
                
            },
            
            ]
        }
    },
    methods:{
            goToHomePage(){
                this.$router.push("/");
            }
    }
}
</script>

我这样应用它，我将数据中的路径放入公司 src。它对很多人都有效。但我不能把图像放在页面上。当我将路径作为字符串直接传递给 src 时，它可以工作。我不明白我如何无法获得路径。你能帮帮我吗？

我试着这样做：Vue.js image v-for bind

标签： javascriptimagevue.jsfrontendv-for

解决方案

您需要从 webpack 导入图像，require使用 javascript 传递它

有关更多详细信息，请参阅这些其他帖子

如何将img src绑定到Vue中的数据

从 Vue.js 中的 props 传递和绑定 img src

推荐阅读