vite动态加载图片

参考CSDN

方法一

根据官网的提示, 就是在将asset 前面加上src

<img v-if="post.welcomeScreen" :src="`/src/assets/blogPhotos/${name}.jpg`" alt="" />

方法二

关于第二个方法,官网说:“实际上,Vite 并不需要在开发阶段处理这些代码!在生产构建时,Vite 才会进行必要的转换保证 URL 在打包和资源哈希后仍指向正确的地址。”

因此,以下的方法开发阶段不需要了解。

首先把给src绑定一个函数,然后把需要图片名字传给函数。

<img :src="" alt="getImageUrl(name)" />
//or
<img v-lazy="getImageUrl(res.img)" />
function getImageUrl(name) {return new URL(`../assets/blogPhotos/${name}.jpg`, import.meta.url).href;
//or
function getImageUrl(name) {return new URL(`/src/assets/img/${name}`, import.meta.url).href}

import.meta

import.meta 对象包含关于当前模块的信息。

它的内容取决于其所在的环境。在浏览器环境中,它包含当前脚本的 URL,或者如果它是在 HTML 中的话,则包含当前页面的 URL。

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

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

相关文章

Ubuntu系统cron服务运行 .sh 脚本

1、安装cron # 安装 apt-get install cron 2、常用命令 # 查看状态 sudo systemctl status cron # 开启服务 sudo systemctl start cron # 停止服务 sudo systemctl stop cron # 重启服务 sudo systemctl restart cron 3、编写要定时执行 hello.sh 脚本 #!/bin/bash echo &…

IDEA使用GIT提交代码中文日志(commit message)乱码

最近换了新的开发环境&#xff0c;导致提交gti中文注释乱码&#xff0c;遂记录一下解决方案 idea中查看git提交信息显示中文是正常的 gitee上显示乱码 本地显示也是乱码 一、命令修改编码格式 git 安装目录下执行 git config --global i18n.commitencoding utf-8git config …

使用ext2fsd将装有Ubuntu的硬盘挂载到Windows后,导致Ubuntu系统无法启动

Ubuntu是一种流行的Linux操作系统&#xff0c;而Windows则是最常用的桌面操作系统之一。有时&#xff0c;我们可能需要将Ubuntu的硬盘连接到Windows系统上&#xff0c;以访问、备份或修改其中的文件。然而&#xff0c;这样的操作可能会导致Ubuntu系统无法正常启动&#xff0c;这…

pdf怎么翻译?有这个工具就够了

pdf怎么翻译&#xff1f;PDF文档一直是我们日常生活和工作中不可避免的一部分。但是&#xff0c;当我们需要翻译PDF文件时&#xff0c;我们往往会感到无助&#xff0c;因为PDF文档不能像其他文本文件一样直接复制和粘贴。那么今天就给大家介绍一款可以帮助我们进行PDF翻译的工具…

【技能实训】DMS数据挖掘项目-Day09

文章目录 任务9【任务9.1.1】升级DataBase类为可序列化的类&#xff0c;以便在文件保存或网络中传递【任务9.1.2】升级LogRec类为可序列化的类&#xff0c;以便在文件保存或网络中传递【任务9.1.3】升级MatchedLogRec类为可序列化的类&#xff0c;以便在文件保存或网络中传递【…

Java编程-基本排序算法

冒泡排序 图解 &#xff08;注&#xff1a;图片来源网络&#xff09; Java代码 package suanfa_Ja;import org.apache.hadoop.security.SaslOutputStream;// 基本排序算法&#xff0c;冒泡排序 时间复杂度 O(n^2) 空间复杂度O(1) public class BubbleSort {public static v…

SPEC CPU 2006 在 CentOS 5.0 x86_64 古老系统测试【4】-O3 不支持 编译失败

gcc -O3 编译失败 结论&#xff1a;默认情况下SPEC CPU 2006 1.2 不支持 gcc -O3编译参数。

Linux 安装 nginx

正常是两种安装方式 一种是使用系统的包管理软件&#xff0c;比如centos的yum -y install nginx命令&#xff08;简单但不推荐&#xff0c;配置文件分散不易管理&#xff0c;且需要配置第三方源yum -y install epel-release等&#xff0c;如果是简单使用&#xff0c;配置文件什…

1.15 什么是后端服务

文章目录 什么是后端服务后端服务的功能后端服务的技术栈结论 什么是后端服务 后端服务&#xff08;Backend Service&#xff09;是指在软件应用中负责处理数据、逻辑和业务功能的组件或模块。它通常运行在服务器端&#xff0c;为前端应用或客户端提供数据和服务支持。 后端服…

[GXYCTF2019]simple CPP

前言 三个加密区域&#xff0c;第一次是基本运算&#xff0c;八位叠加&#xff0c;z3方程 分析 第一轮加密&#xff0c;和Dst中模27异或 &#xff08;出题人对动调有很大意见呢&#xff09; 将输入的字符串按八位存入寄存器中&#xff0c;然后将寄存器内容转存到内存 第一次…

CMake 学习笔记(生成头文件)

CMake 学习笔记&#xff08;生成头文件&#xff09; 经常&#xff0c;我们需要检测系统环境&#xff0c;然后来生成一些对应的头文件&#xff0c;这个头文件通常叫做“configured header file”。一般命名为 config.h。 CMake 有个 configure_file() 命令专门用来做这个事情。…

每日一练 | 华为认证真题练习Day80

1、在Telnet中应用如下ACL&#xff1a;下列说法正确的是&#xff1f; acl number 2000 rule 5 deny source 172.16.105.30 rule 10 deny source 172.16.105.40rule 15 deny source 172.16.105.50rule 20 permit # A. IP地址为172.16.105.6的设备可以使用Telnet服务 B. IP…

SpringBoot中进行elasticSearch查询,使用QueryBuilders构建各类条件查询

查询所有 //搜索全部文档 QueryBuilder queryBuilder QueryBuilders.matchAllQuery();查询单个,等于/eq //单个匹配&#xff0c;搜索name为li的文档 QueryBuilder queryBuilder QueryBuilders.matchQuery("name", "li");查询多个字段匹配某一个值 //搜索…

【数据结构与算法】哈夫曼编码(最优二叉树)实现

哈夫曼编码 等长编码&#xff1a;占的位置一样 变长编码&#xff08;不等长编码&#xff09;&#xff1a;经常使用的编码比较短&#xff0c;不常用的比较短 最优&#xff1a;总长度最短 最优的要求&#xff1a;占用空间尽可能短&#xff0c;不占用多余空间&#xff0c;且不…

C\C++ 使用ping判断ip是否能连通

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan 简介&#xff1a; ping是一种用于测试网络连接的工具&#xff0c;它通过发送数据包到目标设备并等待其响应来工作&#xff0c;以检查网络是否连通。下面是例子. 效果&#xff1a; 代码…

JavaScript的WebAPI

这里写目录标题 DOM 基本概念获取元素事件概念事件的三要素操作元素获取/修改表单元素属性行内样式操作类名样式操作操作节点 DOM 基本概念 DOM 全称为 Document Object Model. W3C 标准给我们提供了一系列的函数, 让我们可以操作: 网页内容 ,网页结构, 网页样式 DOM数的结构如…

基于SpringBoot和Freemarker的用户管理系统

环境准备 JDK 1.8 及以上SpringBoot 2.5.5 及以上MySQL 5.7 及以上MavenIntelliJ IDEA &#xff08;可选&#xff09; 创建项目 我们使用 IntelliJ IDEA 创建一个 Spring Boot Web 项目。 打开 IntelliJ IDEA&#xff0c;点击菜单栏的 “File”&#xff0c;选择 “New”&…

vue2 element ui 的表格使用 sortablejs 拖拽列遇到的问题和解决方案

项目使用 element ui 的表格实现拖动表头可改变列的宽度&#xff0c;又使用sortablejs实现表格的列可拖拽到其他列的位置&#xff0c;导致出现如下的一些问题&#xff1a; 1、某一列宽变大或变小后&#xff0c;只有当前列可拖拽&#xff0c;其他列无法拖拽。 解决方案&#x…

软通动力与华秋达成生态共创合作,共同推动物联网硬件创新

7月11日&#xff0c;在2023慕尼黑上海电子展现场&#xff0c;软通动力信息技术(集团)股份有限公司(以下简称“软通动力”)与深圳华秋电子有限公司(以下简称“华秋”)签署了生态共创战略合作协议&#xff0c;共同推动物联网硬件生态繁荣发展。当前双方主要基于软通动力的产品及解…

【Python基础函数笔记】获取当前时间并写入日志

1.获取当前时间 import os from datetime import datetime import pytzdef get_cur_time():# 获取当前时间return datetime.strftime(datetime.now(pytz.timezone(Asia/Singapore)), %Y-%m-%d_%H-%M-%S)# 基础目录 basedir a logdir os.path.join(basedir, logs, str(args.n…