uni-app:多种方法写入图片路径

一、文件在前端文件夹中

1、相对路径引用

从当前文件所在位置开始寻找图片文件的路径。../../ 表示返回两级目录,即从当前文件所在的 wind.vue 所在的位置开始向上回退两级。接着,进入 static 目录,再进入 look 目录,最后定位到 wind.png 图片文件。

wind: '../../static/look/wind.png', //相对路径引用

html 复制代码
<template>
	<view>
		<image :src="wind" mode=""></image>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				wind: '../../static/look/wind.png', //相对路径引用
			}; 
		},
		methods: {}
	};
</script>
<style>
	image {
		width:300rpx;
		height:300rpx;
	}
</style>

2、绝对路径引用

@别名的绝对路径,表示从项目根目录开始寻找图片文件的路径。在Vue CLI 3及以上版本中,@默认指向src/目录。

wind:require('@/static/look/wind.png'),//绝对路径引用

html 复制代码
<template>
	<view>
		<image :src="wind" mode=""></image>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				wind:require('@/static/look/wind.png'),//绝对路径引用
			}; 
		},
		methods: {}
	};
</script>
<style>
	image {
		width:300rpx;
		height:300rpx;
	}
</style>

二、文件在后端文件夹中

在宝塔中我的图片路径大概是这样的/www/wwwroot/XXXX/public/icon/look/wind.png

wind:'http://XXXX/icon/look/wind.png', //XXXX表示你的服务器端域名

html 复制代码
<template>
	<view>
		<image :src="wind" mode=""></image>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				wind:'http://XXXX/icon/look/wind.png',
			}; 
		},
		methods: {}
	};
</script>
<style>
	image {
		width:300rpx;
		height:300rpx;
	}
</style>
相关推荐
2501_915909063 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
草字7 小时前
uniapp 防止长表单数据丢失方案,缓存表单填写内容,放置卡退或误操作返回。
前端·javascript·uni-app
2501_915106328 小时前
JavaScript编程工具有哪些?老前端的实用工具清单与经验分享
开发语言·前端·javascript·ios·小程序·uni-app·iphone
2501_916013749 小时前
iOS 上架 App 全流程实战,应用打包、ipa 上传、App Store 审核与工具组合最佳实践
android·ios·小程序·https·uni-app·iphone·webview
2501_9151063210 小时前
iOS 26 能耗监测全景,Adaptive Power、新电池视图
android·macos·ios·小程序·uni-app·cocoa·iphone
BumBle12 小时前
uniapp 用css实现圆形进度条组件
前端·vue.js·uni-app
iOS阿玮19 小时前
分享一个4.3(a)瓜,一个操作毁了公司3个月的成果。
uni-app·app·apple
00后程序员张20 小时前
苹果软件混淆的工程逻辑,从符号空间到资源扰动的体系化实现
android·ios·小程序·https·uni-app·iphone·webview
街尾杂货店&1 天前
word属性解释
uni-app
笨笨狗吞噬者1 天前
【uniapp】小程序体积优化,JSON文件压缩
前端·微信小程序·uni-app