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>
相关推荐
xx24065 小时前
UniApp学习笔记
uni-app
七七小报9 小时前
uniapp-商城-36-shop 购物车 选好了 进行订单确认2 支付方式颜色变化和颜色滤镜filter
uni-app
lh_12549 小时前
uniapp 常用开发技巧与实战指南
uni-app
某公司摸鱼前端10 小时前
uniapp 仿企微左边公司切换页
前端·uni-app·企业微信
WKK_10 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
晨集10 小时前
Uni-App 多端电子合同开源项目介绍
java·spring boot·uni-app·电子合同
盛夏绽放14 小时前
uni-app中获取用户实时位置完整指南:解决权限报错问题
uni-app·notepad++
xixixin_14 小时前
【uniapp】vue2 搜索文字高亮显示
java·服务器·前端·uni-app·交互·文字高亮
一夜枫林20 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
良艺呐^O^21 小时前
uniapp实现app自动更新
开发语言·javascript·uni-app