vue3导入本地图片2种实现方法

news2024/10/5 19:16:35

  1. <script setup>中使用import语法:

<template>
  <img :src="logo" alt="Logo">
</template>
 
<script setup>
import logo from './assets/logo.png';
</script>
  1. 使用Vue的ref来动态地在<script setup>中更换图片:

  2. <template>
      <img :src="imageSrc" alt="Dynamic Image">
      <button @click="changeImage">Change Image</button>
    </template>
     
    <script setup>
    import { ref } from 'vue';
     
    const imageSrc = ref('./assets/logo.png');
     
    function changeImage() {
      imageSrc.value = './assets/other-image.png';
    }
    </script>
  3. 方法二:使用new URL(url, import.meta.url)

<script setup>
import { ref } from "vue";
const Img = ref("");
Img.value = new URL(
  "@/assets/xxxx.jpg",
  import.meta.url
).href;
</script>

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

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

相关文章

产品经理-需求分析

需求分析 1.什么是需求&#xff1f; 需求&#xff1a;其本质就是用户的预期&#xff0c;而预期与现状之间存在着差异&#xff0c;就出现了需求另外&#xff0c;用户提出需求时&#xff0c;都会基于某种目的所提出问题、建议或者想法 原始需求的目的是为了避免扯皮&#xff0c;…

基于Arduino的3D打印六足机器人

本项目是在原有项目基础上进行的改进&#xff0c;改进了六足机器人的姿态算法&#xff0c;使姿态在变化时更稳定 基于Arduino的3D打印六足机器人 一、项目说明二、所需配件三、3D打印四、机械腿部4.1腿部结构4.2腿部代码4.3 COPY腿部结构4.4伺服电机接线4.5 连接腿部结构 五、…

PD协议芯片ECP5701+充电管理芯片+升压芯片搭配应用TYPE-C口充电及升压供电系统

以往的电子设备需要有专门的电源适配器来供电&#xff0c;不仅需要大家区分不同设备的充电器&#xff0c;还要专门找地方来放置&#xff0c;还给用户带来了诸多不便。然而&#xff0c;TYPE-C接口&#xff0c;全称USB Type-C&#xff0c;迅速取代了传统的USB接口&#xff0c;成为…

【评测】湖北十堰大带宽300M高防云服务器

湖北十堰的高防服务器拥有高性能处理器、大容量DDR4 ECC内存、SSD硬盘及多种带宽配置&#xff0c;性价比高且配置灵活。它防御强劲&#xff0c;性能稳定可靠&#xff0c;扩展性佳&#xff0c;可满足各类企业需求&#xff0c;是优质服务器的绝佳选择。 清风云官网&#xff1a;ht…

【含文档】基于Springboot+Andriod的成人教育APP(含源码+数据库+lw)

1.开发环境 开发系统:Windows10/11 架构模式:MVC/前后端分离 JDK版本: Java JDK1.8 开发工具:IDEA 数据库版本: mysql5.7或8.0 数据库可视化工具: navicat 服务器: SpringBoot自带 apache tomcat 主要技术: Java,Springboot,mybatis,mysql,vue 2.视频演示地址 3.功能 系统定…

如何正确输入IP地址前面的斜杠:详细指南

在网络配置和文档编写中&#xff0c;经常需要准确地输入IP地址及其子网掩码。IP地址前面的斜杠&#xff08;/&#xff09;用于表示子网掩码的位数&#xff0c;是一个重要的组成部分。然而&#xff0c;对于一些用户来说&#xff0c;输入这个斜杠可能会带来一些困惑。本文将详细介…

c++ union内存布局

// // Created by 徐昌真 on 2024/10/5. // #include <iostream> using namespace std;//定义一个union union Data{int a;char s[7]; //char值的范围(-128~127) }; int main() {//创建一个unionData d;d.s[0] 255; //16进制 0xFF 16进制F对应二进制 1111d.s[1] 1; …

国外电商系统开发-运维系统拓扑布局

点击列表中设备字段&#xff0c;然后定位到【拓扑布局】中&#xff0c;可以看到拓扑发生了变化 再回头&#xff0c;您再次添加一个服务器到系统中&#xff0c;并且选择该服务器的连接节点为您刚才创建的“SDN路由器”&#xff0c;保存后&#xff0c;您可以看到这个服务器连接着…

胡超:引领中美能源与文化合作的创意先锋

中美能源合作领域迎来了一个重要的历史时刻,2024年中美可持续发展峰会(Sino-American Symposium on Sustainable Development)在全球关注下圆满落幕。这场峰会不仅成为了中美两国绿色能源合作的高端平台,也展示了作为该活动的协办方RES(Reverse Energy Solutions)在清洁能源领域…

Django网站admin用户和组的权限机制

Step 1 创建超级用户 python manage.py createsuperuser 在终端输入 Step 2 输入用户名和密码 Step 3在网站上输入 127.0.0.1&#xff1a;8000/admin Step 4创建群组和用户 让创建的组和用户可以访问网站 def index(request):groupnameslist(request.user.groups.values(name)…

【api连接ChatGPT的最简单方式】

通过api连接ChatGPT的最简单方式 建立client 其中base_url为代理&#xff0c;若连接官网可省略&#xff1b;配置环境变量 from openai import OpenAI client OpenAI(base_url"https://api.chatanywhere.tech/v1" )或给出api和base_url client OpenAI(api_key&…

LC刷题专题:堆、大顶堆、小顶堆

文章目录 692. 前K个高频单词215. 数组中的第K个最大元素2336、无限集中的最小数字 这篇文章以后记录自己刷到的题目中与堆有关的。 692. 前K个高频单词 这个题目整体不难&#xff0c;是前k个高频元素的改进版&#xff0c;只需要在创建小顶堆时执行排序规则即可。如果出现次数…

Yolov8轻量级网络改进GhostNet

1,理论部分 由于内存和计算资源有限,在移动设备上部署卷积神经网络 (CNN) 很困难。我们的目标是通过利用特征图中的冗余,为 CPU 和 GPU 等异构设备设计高效的神经网络,这在神经架构设计中很少被研究。对于类 CPU 设备,我们提出了一种新颖的 CPU 高效 Ghost (C-Ghost) …

【2024】uniapp 接入声网音频RTC【H5+Android】Unibest模板下Vue3+Typescript

需求 最近开发一个项目&#xff0c;需要实现声网的接入。由于采用uniapp模式&#xff0c;按照最佳实践采用优先开发H5再适配的模式。因此实现了H5和Android两种模式的接入&#xff0c;Android里采用离线打包自定义基座来进行调试。怕自己忘记了&#xff0c;在这里详细的记录完…

深入学习从入门到放弃:掌握梯度概念,开始征服深度学习!

文章目录 从现实中的例子理解什么是梯度梯度的数学定义梯度的严格的数学定义为什么梯度向量指向函数增长最快的方向&#xff1f; 为什么梯度是深度学习优化的最基础概念在python中实现梯度求导的简单案例一元线性回归多元线性回归 结合示例深度学习中的梯度求导的一般过程数学原…

开源AI智能名片链动2+1模式S2B2C商城小程序源码在B2B情境化营销中的应用

摘要&#xff1a;本文探讨情境化营销在B2B环境中的适用性&#xff0c;分析现有的B2B情境化营销案例&#xff0c;如通过物联网传感设备进行设备监控与预防保养。随后引入“开源AI智能名片链动21模式S2B2C商城小程序源码”&#xff0c;阐述其如何助力B2B企业在情境化营销中提升效…

弧形导轨驱动器高效使用技巧!

弧形导轨驱动器是一种用于驱动滑座沿着导轨做弧线运动的设备&#xff0c;其用方法因具体型号和应用场景的不同而有所差异&#xff0c;通常可以归纳为以下几个步骤&#xff1a; 1、安装前要明确弧形导轨的使用需求&#xff0c;根据需求选择合适的弧形导轨驱动器&#xff0c;准备…

Python办公自动化教程(005):Word添加段落

文章目录 2.1 Python-docx介绍2.2 安装2.3 实例 2.1 Python-docx介绍 python-docx 是一个用于创建和修改 Microsoft Word 文档&#xff08;.docx 格式&#xff09;的 Python 库。它可以方便地生成和处理 Word 文档&#xff0c;而无需直接与 Microsoft Word 程序交互。 2.2 安…

运营弹性的 5 大支柱

作者&#xff1a;来自 Elastic Elastic Platform Team 什么是运营弹性&#xff1f; 没有哪个组织能够免受干扰。无论是错误的更新、有针对性的网络攻击&#xff0c;还是导致大规模供应链动荡的全球流行病&#xff0c;大多数公司在某个时候都会遇到障碍。这是增长的代价。但成功…

2024/10/5 英语每日一段

“There’s no reason, frankly, that someone who already has a passport and just needs to renew it shouldn’t be able to do that online, “Secretary of State Antony Blinken said at a March budget hearing. The State Department launched a pilot program for on…