uni-app 背景图片绑定问题

一时失言乱红尘 2023-02-10 01:26 10阅读 0赞

uni-app由于的图片处理为了兼容小程序,禁止了使用本地图片(相对或者绝对路径) ,可以使用网络图片和base64格式的图片

如果非常想用本地图片,这图片大小不能超过40kb,否则需要转换成base64

在引用图片的时候我发现我一开始我把图片放在再index文件夹(首页文件夹)下面,

然后编译到小程序我发现小程序里面index文件夹(首页文件夹)里面并没有图片

也就是图片放在了首页等等html文件的文件夹中的图片不能编译到其他环境

图片需要另创建一个文件夹来存放,此时就可以编译到其他平台都有这张图片了

<template>
    	<view class="app">
    		<view class="profile-head" :style="{backgroundImage:'url('+imgUrl+')'}">
    			<view class="profile-img">
    				<image src="../../static/image/my/aaas.jpg" mode="widthFix" ></image>
    			</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	let app  = ''
    	export default {
    		data() {
    			return {
    				imgUrl:"../../static/image/my/aaas.jpg"
    			}
    		},
    		onLoad() {
    			app = getApp()
    			// console.log(app.globalData.systemInfo)
    			console.log(this)
    		
    		},
    		methods: {
    			
    		}
    	}
    </script>

页面效果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200519172417445.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200519172852513.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA==,size_16,color_FFFFFF,t_70