uni-app宫格图有问题

Question

uni-app宫格图图片改变不了，好像被固定了
1.这是vue里面的代码

<template>
    <view>
        <uni-section class="mb-10" :title="itemf.name" v-for="(itemf,index) in bookData" type="line" padding>
            <uni-grid column="4" :highlight="true" @change="change">
                <uni-grid-item v-for="(itemc,index) in itemf.list" :index="index" :key="index">
                    <view class="item-box">
                        <uni-icons :type="itemc.type" :size="30" color="#777" />
                        <text class="text">{{itemc.name}}</text>
                    </view>
                </uni-grid-item>
            </uni-grid>
        </uni-section>
    </view>
</template>

<script>
    //导入外部数据
    import bookData from '@/common/tuijian.js';
    export default {
        data() {
            return {
                bookData:bookData

            };
        },
        methods: {
            change(e){
                let{
                    index
                } = e.detail;
                uni.showToast({
                    title:`点击第${index+1}个宫格`,
                    icon:'none'
                })
            }

        }
    }
</script>

<style>
    .item-box{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 15px 0;
    }

</style>

2.这是js代码

export default [{
        "name": "推荐",
        "list": [{
                "type": "color",
                "name": "水浒传",
                "key": "水浒传",
                "icon": "/static/logo.png",
                "cat": 10
            },
            {
                "type": "vip-filled",
                "name": "西游记",
                "key": "西游记",
                "icon": "/static/logo.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
            }
        ]
    },
]

Answer 1

参考免费微信小程序：皆我百晓生 作答，经由专家-皆知整理回复，如问题解决，望采纳；如仍有疑问，请评论回复。

根据您提供的信息，您遇到的问题是宫格图中的图片无法根据数据中的图标路径改变。这通常是因为图片路径不正确或者在uni-app中静态资源的引用方式有误导致的。

首先，请确保您的图片文件确实存在于指定的路径下，即项目中的static文件夹内，并且文件名与路径完全匹配。接下来，检查图片路径引用方式。在uni-app中，静态资源的路径引用通常是正确的，但有时路径问题可能源于其他因素。

如果问题依旧存在，尝试以下步骤来解决：

1. 确认图片路径：确保所有图片路径都是正确的，比如"/static/c3.png"等，并且这些图片存在于项目的static目录下。

2. 使用相对路径或绝对路径：尽管在uni-app中使用相对路径通常是可行的，但有时候明确指定路径可以避免问题。确保您的资源路径是从项目根目录开始的。

3. 清除编译缓存：有时候，旧的编译缓存可能导致问题。尝试清理项目缓存并重新构建。在HBuilderX中，可以通过菜单工具 > 清理缓存，然后重新运行应用。

4. 检查uni-icons与图片显示的混用：在您的模板中，您使用了uni-icons组件来显示图标，但问题描述中提到的是图片更改的问题。确保在uni-grid-item内部，用于显示图片的部分正确引用了数据中的icon字段。

修正后的代码示例，确保您的图片路径引用无误：

<template>
    <view>
        <uni-section class="mb-10" :title="itemf.name" v-for="(itemf, index) in bookData" type="line" padding>
            <uni-grid column="4" :highlight="true" @change="change">
                <uni-grid-item v-for="(itemc, index) in itemf.list" :index="index" :key="itemc.key">
                    <view class="item-box">
                        <!-- 确保这里使用的是正确的图片路径，而不是uni-icons -->
                        <image :src="itemc.icon" mode="scaleToFill" width="60" height="60" />
                        <text class="text">{{itemc.name}}</text>
                    </view>
                </uni-grid-item>
            </uni-grid>
        </uni-section>
    </view>
</template>

确保替换掉原本使用uni-icons的地方，改为使用<image>标签来显示图片，并确保itemc.icon的值正确指向您想显示的图片。

如果以上步骤都已验证无误，问题可能在于其他配置或环境因素。但按照上述步骤操作，通常能解决大部分图片无法显示的问题。