uni-app vue小程序

Question

uni-app 运行之后图片效果出不来，请问哪儿出问题了？
1.这是vue代码

<template>
    <view class="page-body">
        <view class="nav-left">
            <view class="nav-left-item" @tap="categoryClickMain(index)" :key="index"
                :class="index == categoryActive ? 'active' : ''" v-for="(item,index) in TuiJian">
                {{item.name}}
            </view>
        </view>
        <scroll-view class="nav-right" scroll-y="true" :scroll-top='scrollTop' @scroll="scroll">
            <view v-for="(itemf,index) in TuiJian" :key="index" class="box">
                <view>{{itemf.name}}</view>
                <view :id="i" @tap="cart(itemc.name)" class="nav-right-item" v-for="(itemc,i) in itemf.list" :key="i">
                    <image :src="itemc.icon" />
                    <view>{{ itemc.name}}</view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
    //导入数据
    import TuiJian from '@/common/tuijian.js';
    export default {
        data() {
            return {
                height: 0,
                categoryActive: 0,
                scrollTop: 0,
                TuiJian: TuiJian,
                arr: [0, 677, 1354, 2031, 2708]

            };
        },
        methods: {
            scroll(e) {
                this.scrollTop = e.detail.scrollTop;
            },
            cart(text) {
                uni.showToast({
                    title: text,
                    icon: 'none'
                });
            },
            categoryClickMain(index) {
                this.scrollTop = this.arr[index];
                this.categoryActive = index;
            }
        }
    };
</script>

<style>
    .page-body {
        display: flex;
        background: #fff;
        overflow: hidden;
    }

    .nav-left {
        width: 25%;
        background: #fafafa;
    }

    .nav-left-item {
        height: 100upx;
        border-right: solid 1px #f1f1f1;
        border-bottom: solid 1px #f1f1f1;
        font-size: 30upx;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-right {
        padding-top: 15px;
        padding-left: 10px;
        width: 75%;
        /*必须设置高度*/
        height: 100vh;
    }

    .box {
        display: block;
        overflow: hidden;
        border-bottom: 20upx solid #f3f3f3;
        /*css属性，设置占满视窗高度*/
        min-height: 100vh;
    }

    .nav-right-item {
        width: 30%;
        height: 220upx;
        float: left;
        text-align: center;
        padding: 11upx;
        font-size: 28upx;
        background: #fff;
    }

    .nav-right-item image {
        width: 100upx;
        height: 100upx;
    }

    /* 定义选中菜单项的显示样式*/
    .active {
        color: #ff80ab;
        background: #fff;
        border-right: 0;
    }
</style>

2.这是js代码

export default [{
        "name": "推荐",
        "list": [{
                "type": "color",
                "name": "水浒传",
                "key": "水浒传",
                "icon": "../../static/cart.png",
                "cat": 10
            },
            {
                "type": "vip-filled",
                "name": "西游记",
                "key": "西游记",
                "icon": "../../static/c2.png",
                "cat": 10
            },
            {
                "type": "person-filled",
                "name": "红楼梦",
                "key": "红楼梦",
                "icon": "../../static/c3.png",
                "cat": 10
            },
            {
                "type": "calendar-filled",
                "name": "三国演义",
                "key": "三国演义",
                "icon": "../../static/c4.png",
                "cat": 10
            },
            {
                "type": "fire-filled",
                "name": "说岳全传",
                "key": "水浒传",
                "icon": "../../static/c5.png",
                "cat": 10
            }
        ]
    },

    //xiaomi部分
    {
        "name": "小米手机",
        "list": [{
                "type": "color",
                "name": "水浒传",
                "key": "水浒传",
                "icon": "../../static/c1.png",
                "cat": 10
            },
            {
                "type": "vip-filled",
                "name": "西游记",
                "key": "西游记",
                "icon": "../../static/c2.png",
                "cat": 10
            },
            {
                "type": "person-filled",
                "name": "红楼梦",
                "key": "红楼梦",
                "icon": "../../static/c3.png",
                "cat": 10
            },
            {
                "type": "calendar-filled",
                "name": "三国演义",
                "key": "三国演义",
                "icon": "../../static/c4.png",
                "cat": 10
            },
            {
                "type": "fire-filled",
                "name": "说岳全传",
                "key": "水浒传",
                "icon": "../../static/c5.png",
                "cat": 10
            }
        ]
    },
    //红米部分
    {
        "name": "红米手机",
        "list": [{
                "type": "color",
                "name": "水浒传",
                "key": "水浒传",
                "icon": "../../static/c1.png",
                "cat": 10
            },
            {
                "type": "vip-filled",
                "name": "西游记",
                "key": "西游记",
                "icon": "../../static/c2.png",
                "cat": 10
            },
            {
                "type": "person-filled",
                "name": "红楼梦",
                "key": "红楼梦",
                "icon": "../../static/c3.png",
                "cat": 10
            },
            {
                "type": "calendar-filled",
                "name": "三国演义",
                "key": "三国演义",
                "icon": "../../static/c4.png",
                "cat": 10
            },
            {
                "type": "fire-filled",
                "name": "说岳全传",
                "key": "水浒传",
                "icon": "../../static/logo.png",
                "cat": 10
            }
        ]
    }
]

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

问题概括

用户在使用uni-app开发vue小程序时，遇到了图片无法正常显示的问题。

问题出现原因

1. 图片路径可能不正确。
2. CSS样式可能影响了图片的显示。
3. uni-app框架的特定限制或bug。

问题解决方案

1. 检查图片路径：确保图片路径是正确的，并且图片文件已经放置在正确的目录下。
2. 检查CSS样式：确保没有CSS规则阻止了图片的显示，比如display: none;或错误的尺寸设置。
3. 检查uni-app框架文档：查看是否有关于图片显示的特定要求或已知问题。

提供代码

以下是针对上述可能问题的检查和修正：

修改图片路径

确保图片路径是相对于项目根目录的，或者使用绝对路径。

{
  "name": "推荐",
  "list": [
    {
      "icon": "/static/cart.png", // 修改为相对于项目根目录的路径
      // ...
    },
    // 其他列表项也做相应修改
  ]
},

修正CSS样式

检查并修正CSS中关于image的样式，确保图片可以正常显示。

.nav-right-item image {
  width: 100upx;
  height: 100upx;
  display: block; /* 确保图片是块级元素，可以正常显示 */
}

代码运行方式

1. 确保你已经安装了HBuilderX，并配置了uni-app插件。
2. 将上述修改后的代码替换到你的项目中。
3. 在HBuilderX中运行或预览你的小程序。

代码预期运行结果

图片应该能够正常显示在小程序中，且没有CSS或路径问题导致的显示错误。

推荐相关链接

• uni-app官方文档
• Vue.js官方文档
• 小程序图片加载问题解决方案

请根据上述步骤检查和修正你的代码，如果问题仍然存在，可能需要进一步检查uni-app的特定要求或联系框架的技术支持。