vue中动态引入图片

分析

很多时间,不管是vue2,还是vue3开发中都会遇到,动态渲染图片的功能,但是为什么我们直接将图片的路径直接赋值给变量的时候,图片渲染不出来,而通过require引入加载图片后却能正常渲染呢?主要原因在于webpack或vite编译的问题。(以下代码为vue3,vue2一样)
一般情况下,直接在src属性输入图片的路径,就能渲染出图片,如下

<img src="./assets/img.jpeg" />

如果动态加载,就得动态绑定src属性,如下,

<img :src="img1" />
<script setup>
import {ref} from "vue";
let img1 = ref('./assets/img.jpeg');
</script>

但是这样动态绑定src属性,是渲染不来图片,我们可以两者最终编译出来的html。
普通
在这里插入图片描述
动态加载
在这里插入图片描述
可以看出普通加载的图片会被编译成/img/img.13eb2ff7.jpeg这种路径,而动态加载的还是原始路径,这是因为webpack或vite,会将代码编译,最终在内容内构造出一个类似于打包后的dist文件,而就会将普通方式图片路径编译转化成dist文件夹下img文件夹下的资源。可以打包一下这时的代码。
在这里插入图片描述
可以看出图片资源被打包放在了img文件夹下,所有没有编译过的图片路径是访问不到的,这也是动态直接加载图片路径渲染不出来的原因。

但是有一点,在public文件夹下的图片,不管是webpack还是vite都不会进行编译,在该文件夹下的路径得是一个绝对路径,所以不管是普通引用还是动态加载图片都不会有问题的。

解决

1、vue2
在vue2中因为是通过webpack进行打包编译的,所以可以用require以模块的方式引入图片,webpack会将require引入的模块进行打包编译。

const img = require('路径')

2、vue3
在vue3中是通过vite进行打包编译的,而require是webpack中函数,所以在vue3中不能,而vite官网给出了替代方法new URL。

const imgUrl = new URL('./img.png', import.meta.url).href
document.getElementById('hero-img').src = imgUrl

import.meta.url 是一个 ESM 的原生功能,会暴露当前模块的 URL。
3、通用方法 import
不管是vue2还是vue3都可以通过import。

import img from '路径';
注意

1、不管是webpack还是vite在图片大小一定范围内,两者都会把图片编译成base64形式,目的是较少HTTP请求,优化性能。webpack默认的图片打包规则,设置 type: ‘asset’,默认的,对于小于8k的图片,会将图片转成base64直接插入图片。
在这里插入图片描述
对于webpack可以在vue.config.js文件中进行设置,如下

module.exports = {// 使用configureWebpack对象,下面可以直接按照webpack中的写法进行编写// 编写的内容,最终会被webpack-merge插件合并到webpack.config.js主配置文件中configureWebpack: { module: {rules: [{test: /\.(png|jpe?g|gif|webp|avif)(\?.*)?$/,type: 'asset',parser: {dataUrlCondition: {// 这里我将默认的大小限制改成6k。// 当图片小于6k时候,使用base64引入图片;大于6k时,打包到dist目录下再进行引入maxSize: 1024 * 6}}}]}}
}

在vite中在vite.config.js文件中进行设置,如下

import { defineConfig } from "vite";export default defineConfig({build: {// 10kb以下,转Base64assetsInlineLimit: 1024 * 10,},
});

2、public下的资源一定要绝对路径,虽然public文件不会被编译,但是src下的文件都会被编译。由于引入的是public下的资源,不会走require,会直接返回代码中的定义的文件地址,该地址无法在编译后的文件目录(dist目录)下找到对应的文件,会导致引入资源失败。

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

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

相关文章

解释什么是内连接、左连接和右连接,并给出每种连接的SQL示例

在关系型数据库中&#xff0c;连接&#xff08;JOIN&#xff09;是一种在查询中组合来自两个或多个表的行的方法。这些表通过一个或多个列中的相关值关联起来。SQL 提供了几种类型的连接&#xff0c;每种连接在处理表之间的关系和数据检索时都有其特定的方式。最常见的连接类型…

华为HarmnyOS TypeScript基础语法快速入门

华为HarmnyOS TypeScript基础语法快速入门 一、JavaScript、TypeScript、ArkTS二、TypeScript基础语法1. 基础类型2. 条件语句3. 函数4. 类5. 模块6. 迭代器 一、JavaScript、TypeScript、ArkTS ArkTS是HarmonyOS优选的主力应用开发语言。它在TypeScript&#xff08;简称TS&am…

Flask+Gunicorn中文乱码解决方案

在使用FlaskGunicorn部署应用时&#xff0c;发现中文的输出存在乱码的现象。这是因为Python的默认编码是ASCII&#xff0c;而ASCII并不支持中文字符。 解决Python中文乱码问题的首要任务是确保使用合适的编码方式。当你处理中文字符时&#xff0c;应该使用UTF-8编码。UTF-8是一…

Axios入门

1.概念 Axios是一个开源的可以用在浏览器和node.js的异步通信框架&#xff0c;他的主要功能是实现Ajax异步通信 2.Axios入门程序 2.1.准备json格式的文件 {"name": "小明","address": {"street": "雁塔","city"…

动画原理:表面形变算法的思考与总结

前言&#xff1a; 之前我的文章 Mesh形变算法_mesh算法-CSDN博客就有大致的讨论过&#xff0c;介绍的也比较粗略&#xff01;现在主要是想在Triangulated Surface Mesh Deformation方向上更深入的讨论一下&#xff01;结合今年我对这一块的学习谈谈我的理解~ 下面要介绍大致几…

Java设计模式——桥连模式

桥接模式简单来说就是通过将抽象部分和具体部分分离&#xff0c;使它们可以独立地变化。如果你的一个类存在多个变化维度&#xff08;如抽象和具体的实现&#xff09;。若使用继承来处理这些变化&#xff0c;将会导致类层次结构的急剧增加&#xff0c;难以管理和维护。并且&…

MySQL(基础篇)——函数、约束

一.函数 1.定义 函数是指一段可以直接被另一段程序调用的程序或代码。 2.字符串函数 常见如下&#xff1a; -- 字符串拼接 SELECT CONCAT(hello,MySql) AS CONCAT -- 将字符串全部转为小写 SELECT LOWER(HEllo MYSql) AS LOWER -- 将字符串全部转为大写 SELECT UPPER(Hello…

环境配置 |Jupyter lab/Jupyter Notebook 安装与设置

ipynb使用Jupyterlab/Jupyter Notebook 来编写Python程序时的文件,在使用时,可以现转换为标准的.py的python文件 1.Jupyter Lab 1.1.下载安装 环境&#xff1a;Linux pip install jupyterlab 1.2.使用 jupyter lab 点击后进入 1.3.jupyter lab更换内核 因为我的是在anac…

178文章复现:基于matlab的微震图像去噪

文章复现&#xff1a;基于matlab的微震图像去噪&#xff0c;利用同步压缩连续小波变换进行自动微震去噪和起始检测&#xff0c;SS-CWT 可对时间和频率变化的噪声进行自适应过滤&#xff0c;可以去除小幅值信号中的大部分噪声&#xff0c;检测地震事件并估算地震发生时间。程序已…

数据结构之树结构(上)

存储方式 数组存储方式的分析 优点&#xff1a;通过下标方式访问元素&#xff0c;速度快。对于有序数组&#xff0c;还可使用二分查找提高检索速度。 缺点&#xff1a;如果要检索具体某个值&#xff0c;或者插入值&#xff08;按一定顺序&#xff09;会整体移动&#xff0c;效…

C++实现计算复杂数学表达式

本文使用C实现Shunting-yard算法&#xff0c;将中缀表达式转换为后缀表达式&#xff0c;然后使用后缀表达式计算结果&#xff0c;实现了目前支持以下 四则运算&#xff08;、-、*、/&#xff09;开平方&#xff08;^&#xff09;取基数为 10 的对数&#xff08;L&#xff09;小…

小(2)型土石坝安全监测设施配置详解

小(2)型土石坝的安全监测是确保大坝稳定、安全运行的重要环节。为此&#xff0c;合理配置安全监测设施显得尤为重要。以下是对小(2)型土石坝安全监测设施配置的详细介绍。 一、渗流量监测 渗流量是反映大坝安全状况的关键指标之一。为准确监测渗流量&#xff0c;我们采用仪器量…

【大数据】Flink SQL 语法篇(十):EXPLAIN、USE、LOAD、SET、SQL Hints

《Flink SQL 语法篇》系列&#xff0c;共包含以下 10 篇文章&#xff1a; Flink SQL 语法篇&#xff08;一&#xff09;&#xff1a;CREATEFlink SQL 语法篇&#xff08;二&#xff09;&#xff1a;WITH、SELECT & WHERE、SELECT DISTINCTFlink SQL 语法篇&#xff08;三&…

day05_用户管理minIO角色分配(页面制作,查询用户,添加用户,修改用户,删除用户,用户头像,查询所有角色,保存角色数据)

文章目录 1 用户管理1.1 页面制作1.2 查询用户1.2.1 需求说明1.2.2 后端接口需求分析SysUserSysUserDtoSysUserControllerSysUserServiceSysUserMapperSysUserMapper.xml 1.2.3 前端对接实现思路sysUser.jssysRole.vue 1.3 添加用户1.3.1 需求说明1.3.2 页面制作1.3.3 后端接口…

ChatGPT-4 AI 绘图魔力释放

最近刚开通了 ChatGPT4&#xff0c;正好要设计一个网站图标&#xff0c;想测试一下它AI绘图的能力&#xff0c;让它根据文字描述生成一个想象中的图标 &#xff08;PS&#xff1a;如果想体验 GPT4 文生图&#xff0c;可以看这个教程 如何升级 ChatGPT 4.0&#xff09; 第1次交…

【三维重建】【SLAM】SplaTAM:基于3D高斯的密集RGB-D SLAM

题目&#xff1a;SplaTAM: Splat, Track & Map 3D Gaussians for Dense RGB-D SLAM 地址&#xff1a;spla-tam.github.io 机构&#xff1a;CMU&#xff08;卡内基梅隆大学&#xff09;、MIT&#xff08;美国麻省理工&#xff09; 总结&#xff1a;SplaTAM&#xff0c;一个新…

ywtool network命令

一.network功能介绍 network功能就是通过脚本的方式配置IP信息&#xff0c;分为4项: (1) 配置单网卡(2)配置br网桥(单网卡)(3)配置bond(两张网卡)(4)配置ovs网桥(单网卡) 日志文件:/var/log/ywtools/ywtools-network.log/usr/local/ywtools/config/config.ini中network参数:…

从预训练到通用智能(AGI)的观察和思考

1.预训练词向量 预训练词向量&#xff08;Pre-trained Word Embeddings&#xff09;是指通过无监督学习方法预先训练好的词与向量之间的映射关系。这些向量通常具有高维稠密特征&#xff0c;能够捕捉词语间的语义和语法相似性。最著名的预训练词向量包括Google的Word2Vec&#…

Go语言实战五-go语言的类型与iton

前言 go语言是静态类型语言&#xff0c;也就是在编译时编译器需要知道程序中值的类型&#xff0c;这样有利于减少bug和提高性能&#xff0c;具体就是内存的分配量和其中的内容 用户定义类型 1.用户定义新的类型&#xff0c;需要使用type 和struct关键字 type user struct {…

项目实现json字段

有些很复杂的信息&#xff0c;我们一般会用扩展字段传一个json串&#xff0c;字段一般用text类型存在数据库。mysql5.7以后支持json类型的字段&#xff0c;还可以进行sql查询与修改json内的某个字段的能力。 1.json字段定义 ip_info json DEFAULT NULL COMMENT ip信息, 2.按…