uniapp网络图片资源动态引入

用法

首先去小程序后台添加网络图片资源的域名

然后在项目的utils文件夹下新建resource.js,在里面写入网络图片资源路径,如下:

import { ref } from "vue";
const base = 'https://xxx.xxx.com/test/image/'
const path = ref({
 logo: base + 'logo.png',
})
export { path }

页面使用:

<template>
 <view>
 <image :src="path.logo" />
 </view>
</template>
 
<script setup>
import { path } from '@/utils/resource.js';
</script>

遇到的问题

在static文件夹下创建resource.js,页面使用报错:

<template>
 <view>
 <image :src="path.logo" />
 </view>
</template>
 
<script setup>
import { path } from '@/static/resource.js';
</script>

报错信息:

14:15:14.710 MiniProgramError
14:15:14.710 module 'static/vue.js' is not defined, require args is 'vue'
14:15:14.710 Error: module 'static/vue.js' is not defined, require args is 'vue'

这是因为静态目录的限制,static目录通常只存放纯静态资源,不适合放JS模块
uniapp运行小程序,在微信开发者工具上查看编译后的文件,发现内容依旧是原始内容,没有任何变化,说明static/resource.js文件没有经过编译

而utils/resource.js文件则会正常编译