Question

我正在应用天气，但是遇到了问题。这是我的代码

<template>
<div>
    <div><img :src="'../assets/' + icon" alt="weather icon"></div>
</div>
</template>

<script>
export default {
        computed:{
            icon(){
            switch (this.$store.getters.list[0].weather[0].icon) {
                case "01d":
                    return "day.svg"
                    break;
                case "01n":
                    return "night.svg"
                    break;
                case "02d":
                    return "cloudy-day-1.svg";
                    break;
                case "02n":
                    return "cloudy-night-1.svg";
                    break;
                case "03d":
                    return "cloudy-day-2.svg";
                    break;
                case "03n":
                    return "cloudy-night-2.svg"
                    break;
                case "04d":
                    return "cloudy-day-3.svg";
                    break;
                case "04n":
                    return "cloudy-night-3.svg"
                    break;
                case "09d" || "09n":
                    return "rainy-7.svg";
                    break;
                case "10d" || "10n":
                    return "rainy-1.svg";
                    break;
                case "11d" || "11n":
                    return "thunder.svg";
                    break;
                case "12d" || "13n":
                    return "snowy-6.svg"
                    break;
            }
        }
    }
}

如果使用静态路径，则我的图像路径在没有v-bind的情况下可以正常工作。但这不适用于动态路径。 webpack有什么问题吗？我检查了控制台元素选项卡，似乎路径是正确的。

Answer 1

好的，我找到了解决方案。应该使用require（）

<div><img :src="'require(../assets/' + icon)" alt="weather icon"></div>

Vue.js组件看不到img

1 个答案: