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>
相关推荐
游戏开发爱好者82 小时前
FTP 抓包分析实战,命令、被动主动模式要点、FTPS 与 SFTP 区别及真机取证流程
运维·服务器·网络·ios·小程序·uni-app·iphone
2501_915909064 小时前
iOS 26 文件管理实战,多工具组合下的 App 数据访问与系统日志调试方案
android·ios·小程序·https·uni-app·iphone·webview
盛夏绽放5 小时前
uni-app Vue 项目的规范目录结构全解
前端·vue.js·uni-app
2501_9159184118 小时前
掌握 iOS 26 App 运行状况,多工具协作下的监控策略
android·ios·小程序·https·uni-app·iphone·webview
知识分享小能手19 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
2501_9159090621 小时前
iOS 混淆实战,多工具组合完成 IPA 混淆与加固(源码 + 成品 + 运维一体化方案)
android·运维·ios·小程序·uni-app·iphone·webview
赵庆明老师1 天前
Uniapp微信小程序开发:EF Core 中级联删除
uni-app
Javashop_jjj1 天前
三勾软件| 用SpringBoot+Element-UI+UniApp+Redis+MySQL打造的点餐连锁系统
spring boot·ui·uni-app
Q_Q5110082851 天前
python+uniapp基于微信小程序的心理咨询信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
HuYi_code1 天前
WeChat 小程序下载文件实现
微信小程序·uni-app