uniapp vue3 静态图片引入

方法一 从新定义路径 一定看好你图片的路径

代码
复制代码
<template>
    <div class="main">
        Main
        <img :src="getImg()" alt="">
    </div>
</template>

<!-- 方式一
// <script setup>
// let imgName = 'logo.png'
// const getImg = () => {
//     return new URL(`/static/${imgName}`, import.meta.url).href;
// }
// </script> -->

<!-- 方式二 -->
<script >
	export default {
		setup(){
			const imgName = 'logo.png'
			
			function getImg (){
				// 从新定义了一下图片路径  返回返回一下 
				return new URL(`/static/${imgName}`, import.meta.url).href;
			}
			return{
				imgName,
				getImg
			}
		}
	}

</script>

展示

方法二

代码
复制代码
<template>
	<div v-for="item in services.items" :key="item.icon">
		  <img :src="item.icon" />
		<p>{{item.label}}</p>
	</div>
</template>
<script setup>
	const services = {
		title: '园区服务',
		items: [{
				icon: '/static/logo.png',
				label: '招租发布',
				path: '/pages/index/index',
			},
			{
				icon: '/static/faxian.png',
				label: '手续办理',
				path: '/pages/index/index',
			},
		],
	};

</script>
展示
相关推荐
BeefyBytes5 分钟前
动态组件库建设
前端
懒大王952723 分钟前
uni-app + Vue3 + EZUIKit.js 播放视频流
开发语言·javascript·uni-app
懒大王952727 分钟前
uni-app + Vue3 开发展示 echarts 图表
前端·uni-app·echarts
yinuo33 分钟前
Uni-App跨端实战:微信小程序WebView与H5通信全流程解析(01)
前端
xkroy1 小时前
ajax
前端·javascript·ajax
Yvonne爱编码1 小时前
AJAX入门-URL、参数查询、案例查询
前端·javascript·ajax
闲人编程1 小时前
前端形态与样式风格:从古典到现代的视觉语言演进
前端·css·状态模式·组件·js·风格·响应式
JudithHuang1 小时前
Mac版微信开发者工具登录二维码不显示问题解决方案
前端
Swift社区1 小时前
如何解决 Vue2 前端项目为何无法访问本地资源(chunk.js 加载一直 pending/转圈)
开发语言·前端·javascript