图片组件<image>中src属性动态加载本地图片地址无效，请问该如何写？

分类：uni-app

uniapp

首先，本地图片放置在项目根目录下的static目录中，而且路径为：/static/images/xxx.png

经测试：如果直接静态写死，图片是可以显示的，如下：

<image class="icon" src="@/static/images/xxx.png"></image>

但如果使用动态本地地址就无法显示出图片，代码如下：

<template>  
<view>  
    <view class="booking-item" v-for="(item, index) in list" :key="index">  
        <image class="icon" :src="item.icon"></image>  
        <text class="title">{{item.title}}</text>  
    </view>  
</view>  
</template>  

<script setup>  
    import { ref } from 'vue';  

    const list = ref([  
        {  
            title: '标题1',  
            icon: '@/static/images/xxx1.png'  
        },  
        {  
            title: ''标题2',  
            icon: '@/static/images/xxx2.png'  
        },  
        {  
            title: ''标题3',  
            icon: '@/static/images/xxx3.png'  
        }  
    ])  
</script>

请问：如果想实现加载动态本地图片地址，该如何写？为何使用@开头不行呢？求求解答

补充：如果图片不是放在static目录下，而是放在自定义common目录下，动态加载本地图片该如何写呢？

demo.zip

2024-08-05 09:22 负责人:无分享

4 个回复

爱豆豆 - 办法总比困难多

你是cli创建的项目吗？不加@ 试试

const list = ref([    
        {    
            title: '标题1',    
            icon: '/static/images/xxx1.png'    
        },    
        {    
            title: ''标题2',    
            icon: '/static/images/xxx2.png'    
        },    
        {    
            title: ''标题3',    
            icon: '/static/images/xxx3.png'    
        }    
    ])

涛少 (作者)

谢谢，可以显示出来了，但还有一个问题，如果我图片不放在static目录下，而是放在一个自定义目录common下，用你上面的方法还是加载不了，请问有遇到过吗？

2024-08-05 10:04
爱豆豆

回复涛少: 没有我这common目录也可以正常显示

2024-08-05 10:11
涛少 (作者)

回复爱豆豆: 我这里试了，图片放在common目录下，如果直接在模板上写是可以显示，类似这样： <image class="icon" src="/common/image/consult-icon1.png"></image>，但如果是用动态数据绑定的方式就无法显示，类似这样： <image class="icon" :src="item.icon"></image> ，请问，有什么办法解决吗？

2024-08-06 14:52
爱豆豆

回复涛少: 可以直接发个复现工程吗？我帮你看看啥原因因为我这边复现不出来

2024-08-06 15:01
涛少 (作者)

回复爱豆豆: 好的，我已上传demo（在问题下面demo.zip），麻烦您帮忙看看，谢谢

2024-08-06 17:59