uniapp + vue3 静态图片引入

news2024/10/7 4:29:54

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

代码
<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>
展示 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1084211.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

共享WiFi二维码项目如何加盟代理?有哪些注意事项!

随着移动互联网的发展&#xff0c;如今WiFi热点已成为人们日常生活的必需品。而共享wifi二维码项目也渐渐成为了一个非常有前景的共享商业模式。用户可以通过扫共享wifi二维码享受免费的上网服务&#xff0c;而加盟商则可以赚取一定的推广费用&#xff0c;是一种非常理想的商业…

ppt怎么压缩到10m以内?分享ppt缩小方法

在日常工作中&#xff0c;我们常常需要制作和分享PowerPoint演示文稿&#xff0c;然而&#xff0c;有时候文稿中的图片、视频等元素会导致文件过大&#xff0c;无法在电子邮件或其他平台上顺利传输。为了将PPT文件压缩到10M以内&#xff0c;我们可以使用一些专门的文件压缩工具…

EasyRAFT

EasyRaft 介绍 EasyRaft是Raft&#xff08;共识算法&#xff09;的Java实现&#xff0c;主要目的在于提供一种高性能的分布式一致性协议。 覆盖Jraft实现的功能 分布式一致性 分布式一致性 (distributed consensus) 是分布式系统中最基本的问题&#xff0c;用来保证一个分布式…

使用kaliber与imu_utils进行IMU、相机+IMU联合标定

目录 1 标定工具编译 1.1 IMU标定工具 imu_utils 1.2 相机标定工具 kaliber 2 标定数据录制 3 开始标定 3.1 IMU标定 3.2 相机标定 3.3 相机IMU联合标定 4 将参数填入ORBSLAM的文件中 1 标定工具编译 1.1 IMU标定工具 imu_utils 标定IMU我们使用imu_utils软件进行标定…

kepler.gl 笔记:地图样式

1 设置地图样式 2 调整layer的上下顺序 3 地图图层 Label&#xff1a;显示城市、社区等的标签。Road&#xff1a;显示半透明的道路线图层。Border&#xff1a;显示州和大陆边界。Building&#xff1a;显示建筑物轮廓。Water&#xff1a;显示水体。Land&#xff1a;显示公园、山…

Excel 函数大全应用,包含各类常用函数

Excel 函数大全应用&#xff0c;各类函数应用与案例实操。 AIGC ChatGPT 职场案例 AI 绘画 与 短视频制作&#xff0c; Power BI 商业智能 68集&#xff0c; 数据库Mysql8.0 54集 数据库Oracle21C 142集&#xff0c; Office 2021实战&#xff0c; Python 数据分析&#xff0…

批量文件重命名软件 A Better Finder Rename 11汉化for mac

A Better Finder Rename 11是一款功能强大的文件重命名工具&#xff0c;可在Mac操作系统上使用。它提供了简单而直观的界面&#xff0c;帮助用户快速批量重命名文件和文件夹&#xff0c;提高文件管理和组织效率。 以下是A Better Finder Rename 11可能提供的一些主要功能和特点…

U盘怎么设置为只读?U盘怎么只读加密?

当将U盘设置为只读模式时&#xff0c;将只能查看其中数据&#xff0c;无法对其中数据进行编辑、复制、删除等操作。那么&#xff0c;怎么将U盘设置成只读呢&#xff1f; U盘如何设置成只读&#xff1f; 有些U盘带有写保护开关&#xff0c;当打开时&#xff0c;U盘就会处于只读…

摩尔信使MThings设备管理

设备是通信目标设备的本地镜像或服务对象&#xff0c;设备是进行一切MThings功能的基础。通过这种设备集成方法&#xff0c;MThings才具备了多设备、多协议、多通道的调试能力。 1、添加设备 1. 添加设备入口&#xff1b; 2. 选择添加设备所在的通道&#xff1b; 3. 选择添加…

AI智能网关在工业物联网领域有哪些应用优势

随着工业物联网规模的持续扩大&#xff0c;监测个控制需求的增加&#xff0c;传统工业网关越来越难以满足工业物联网的发展步伐。针对规模庞大、设备复杂、自动化智能化水平要求高的工业物联网应用&#xff0c;佰马科技推出了多款搭载AI智能网关&#xff0c;依托强劲处理器性能…

c++视觉----使用多边形包围轮廓

外部矩形边界:boundingRect()函数 #include <opencv2/opencv.hpp> #include <iostream> #include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp>using namespace std; using namespace cv; #include <iostream> #incl…

美创科技三重数据安全韧性,杜绝删库跑路

从删库到跑路&#xff0c;教训很多&#xff0c;但类似事件近年来总在重复上演&#xff0c;有运维部为此连夜鏖战恢复&#xff0c;更有企业陷入“至暗时刻”&#xff0c;经济受损、名誉蒙尘。 组织单位应该采取怎样的策略和积极主动的方法&#xff0c;避免酿成严重的后果&#x…

视频太大怎么压缩变小?超过1G的视频这样压缩

视频已经成为了我们日常生活中不可或缺的一部分&#xff0c;然而&#xff0c;很多时候&#xff0c;我们可能会遇到视频文件过大&#xff0c;无法在某些平台上传或保存的问题。那么&#xff0c;如何将过大的视频文件压缩变小呢&#xff1f; 下面就给大家分享三款实用的工具&…

python写一个文本处理器

gpt给的latex在xmind中有时候会多出写红色的括号在xmind中会报红&#xff0c;影响观感&#xff0c;用python写一个自动删除],[,(,)的文本处理器&#xff0c;并且带有图形界面&#xff0c;本次程序用来解决gpt发来的latex问题&#xff0c;&#xff1a; import tkinter as tkdef…

MOS管在户用储能上的应用-REASUNOS瑞森半导体

一、前言 户用储能又称家庭储能系统&#xff0c;类似于微型储能电站&#xff0c;是分布式能源&#xff08;DER&#xff09;的重要组成部分&#xff0c;其运行不受城市供电压力影响。户用储能产品系统通常由电池组、电池管理系统&#xff08;BMS&#xff09;、储能变流器&…

聊聊Maven的依赖传递、依赖管理、依赖作用域

1. 依赖传递 在Maven中&#xff0c;依赖是会传递的&#xff0c;假如在业务项目中引入了spring-boot-starter-web依赖&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId>…

qt5.14.2+VS源码调试记录

在对qt使用时&#xff0c;有时需要对源代码进行调试&#xff0c;方便进行问题定位和debug&#xff0c;但直接安装的qt不能进入qt源码&#xff0c;需要进行一定的操作才能进行源码调试和定位。 源码调试需要对应版本的pdb文件&#xff0c;可以在官网下载&#xff0c;也可找其它…

Linux文件特殊权限与特殊属性

Linux特殊权限 一、粘滞位权限: 功能: 为目录添加粘滞位后该目录中创建的文件和目录只有创建者和超级管理员可以删除。使用场景: 粘滞位权限用于公共目录和临时目录等场景,它提供了一种限制删除和重命名操作的机制,以保护文件的安全性和完整性示例: passwd 程序,允许普…

ESP32-S3上手开发

1、搭建开发环境 首先搭建开发环境&#xff0c;这里采用了windows下集成开发环境ide进行开发&#xff0c;具体的安装方法&#xff1a;ESP-IDF安装配置 这里使用的乐鑫的esp32s3&#xff0c;N16R8 2、esp32s3模块 从上面图中可以看到&#xff0c;N16R8这里使用了外扩16M的fl…

CustomShapes/自定义形状, CustomCurves/自定义曲线, AnimateableData/数据变化动画 的使用

1. CustomShapes 自定义形状视图 1.1 资源图文件 therock.png 1.2 创建自定义形状视图 CustomShapesBootcamp.swift import SwiftUI/// 三角形 struct Triangle: Shape{func path(in rect: CGRect) -> Path {Path { path inpath.move(to: CGPoint(x: rect.midX, y: rect.mi…