本地非文字资源无法加载
目录
方法A.静态/动态绑定路径
方法B.require导入(运行时加载)
方法C.import导入(x)(编译时加载)
方法D.ref直接操作元素赋值(x)
相关知识
import和requir区别
模板路径:webpack和vue中路径@
视频,图片流,要么提前解析,要么require提前导入
原理:流式传输,边传输边处理,数据分包
方法A.静态/动态绑定路径
<template><div><img src="../../assets/images/logo.png" /></div>
</template><template><div><img src="@/assets/images/logo.png" /></div>
</template>
方法B.require导入(运行时加载)
const imgElements = this.$refs.uploadRef.$el.querySelectorAll('img');imgElements.forEach((imgElement: HTMLImageElement) => {imgElement.src = require('@/assets/img/excel.png');});
方法C.import导入(x)(编译时加载)

方法D.ref直接操作元素赋值(x)
运行时路径没有被正确解析,依旧是“@/assets/img/excel.png”
因为 JavaScript 中的相对路径是相对于当前执行脚本文件的路径,
而不是相对于 HTML 文件或项目根目录的路径,可以尝试重新编译
<template><img ref="myImage" />
</template><script>
export default {mounted() {this.$refs.myImage.src = "@/assets/img/excel.png";}
};
</script>
一般用绝对路径就没有问题,但模板路径的话,解析可能失败,
::v-deep .mds-upload-card-icon {&::before {content: '';display: block;width: 31px;height: 31px;background: url('../../assets/img/excel.png');background-size: 31px 31px;z-index: 9999;}
}
//深度选择器::v-deep,改变第三方插件或者动态生成插件的样式
//在 CSS 中,& 符号用于引用父选择器.mds-upload-card-icon
相关知识
import和requir区别
require/import// CommonJS 的写法
const moduleA = require('moduleA');
const func1 = moduleA.func1;
const func2 = moduleA.func2;
// ES6 的写法
import { func1, func2 } from 'moduleA';module.exports/export// commonJS 的写法
var React = require('react');
var Breadcrumbs = React.createClass({render() {return <nav />;}
});
module.exports = Breadcrumbs;// ES6 的写法
import React from 'react';
class Breadcrumbs extends React.Component {render() {return <nav />;}
};
export default Breadcrumbs;
- 规范:require是CommonJS,AMD规范的模块化语法,import是ECMAScript 6规范的模块化语法,如果要兼容浏览器的话必须转化成es5的语法;CommonJS模块默认export的是一个对象,即使导出的是基础数据类型。
- 本质:require是赋值过程,其实require 的结果就是对象、数字、字符串、函数等,再把require的结果赋值给某个变量,引入复杂数据类型时,数据浅拷贝该对象。。import是解构过程。
- 加载:require是运行时加载,import是编译时加载;
- 位置:require可以写在代码的任意位置,import只能写在文件的最顶端且不可在条件语句或函数作用域中使用;
- 改变:require通过module.exports导出的值就不能再变,import通过export导出的值可以改变;
模板路径:webpack和vue中路径@
在Vue中,@符号通常用作别名,它是Vue CLI(Vue命令行工具)提供的一种特殊配置。
默认情况下,@别名在Webpack中被配置为指向项目的src目录
tsconfig.json
{"compilerOptions": {"baseUrl": "",//baseUrl": "." 指定了项目的根路径,"paths": {"@/*": ["src/*"],//配置了 @ 别名指向 src 目录。// 其他路径映射...}}
}
相关文章:
本地非文字资源无法加载
目录 方法A.静态/动态绑定路径 方法B.require导入(运行时加载) 方法C.import导入(x)(编译时加载) 方法D.ref直接操作元素赋值(x) 相关知识 import和requir区别 模板路径&#…...
Java电子招投标采购系统源码-适合于招标代理、政府采购、企业采购
功能描述 1、门户管理:所有用户可在门户页面查看所有的公告信息及相关的通知信息。主要板块包含:招标公告、非招标公告、系统通知、政策法规。 2、立项管理:企业用户可对需要采购的项目进行立项申请,并提交审批,查看…...
万向节死锁
要理解万向节死锁的产生原因,首先要理解欧拉角变换,欧拉角变换是基于最初始的坐标进行变换而非变换后的坐标进行变换。 欧拉角变换需要空间中的三个角(即变换后每个轴的偏移量),另外还有每个轴的变换顺序。值得注意的…...
大数据课程D1——hadoop的初识
文章作者邮箱:yugongshiyesina.cn 地址:广东惠州 ▲ 本章节目的 ⚪ 了解大数据的概念; ⚪ 了解大数据的部门结构; ⚪ 了解hadoop的定义; ⚪ 了解hadoop的发展史; 一、大数据简介 1. 概述…...
xml命名空间
xml命名空间 一个xml文档中可以包含多个元素和属性,在文档中使用多个DTD文件时,可能会碰到相同的元素,而这些名称相同的元素可能代表了完全不同的含义,为了防止命名冲突,W3C提供了一个推荐标准-XML命名空间 命名空间有…...
七、Kafka源码分析之网络通信
1、生产者网络设计 架构设计图 2、生产者消息缓存机制 1、RecordAccumulator 将消息缓存到RecordAccumulator收集器中, 最后判断是否要发送。这个加入消息收集器,首先得从 Deque 里找到自己的目标分区,如果没有就新建一个批量消息 Deque 加进入 2、消…...
WEB安全测试通常要考虑的测试点
1、问题:没有被验证的输入 测试方法: 数据类型(字符串,整型,实数,等) 允许的字符集 最小和最大的长度 是否允许空输入 参数是否是必须的 重复是否允许 数值范围 特定的值(枚举型&a…...
关于uni.createInnerAudioContext()的duration音频长度获取不到问题
关于uni.createInnerAudioContext()的duration音频长度获取不到问题 代码如下: onLoad() {let _this this//初始化语音播放对象this.audioObj uni.createInnerAudioContext();this.audioObj.src 音频链接;// 音频进入可以播放状态,但不保证后面可以流…...
使用rknn-toolkit2把YOLOV5部署到OK3588上
使用rknn-toolkit2把YOLOV5部署到OK3588上 虚拟环境搭建软件包安装在PC机上运行yolov5目标检测 虚拟环境搭建 首先在PC的ubuntu系统安装虚拟环境: 我的服务器是ubuntu18.04版本,所以安装python3.6 conda create -n ok3588 python3.6 需要键盘输入y&…...
【雕爷学编程】Arduino动手做(93)--- 0.96寸OLED液晶屏模块14
37款传感器与执行器的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止这37种的。鉴于本人手头积累了一些传感器和执行器模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的&am…...
ffplay播放器剖析(5)----视频输出剖析
文章目录 1.视频输出模块1.1 视频输出初始化1.1.1 视频输出初始化主要流程1.1.2 calculate_display_rect初始化显示窗口大小 1.2 视频输出逻辑1.2.1 event_loop开始处理SDL事件1.2.2 video_refresh1.2.2.1 计算上一帧显示时长,判断是否还要继续上一帧1.2.2.2 估算当前帧显示时长…...
21.2:象棋走马问题
请同学们自行搜索或者想象一个象棋的棋盘, 然后把整个棋盘放入第一象限,棋盘的最左下角是(0,0)位置 那么整个棋盘就是横坐标上9条线、纵坐标上10条线的区域 给你三个 参数 x,y,k 返回“马”从(0,0)位置出发,必须走k步 …...
【CSS】手写 Tooltip 提示组件
文章目录 效果示例代码实现 效果示例 代码实现 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>一颗不甘坠落的流星</title><style>body {padding: 120px;}.tooltip {position: relative;display: inline-blo…...
MySQL DDL语法
MySQL DDL语法 DDL简介 MySQL DDL(Data Definition Language)是用于定义和管理数据库结构的语言。它包括创建、修改和删除数据库、表、视图、索引和其他数据库对象的语句。DDL语法的重要性如下: 数据库结构定义:DDL语句用于创建…...
Git 绑定账号 和clone
一:环境: 下载安装完成Git,在桌面或文件夹下(在你将要保存代码的位置)右击可以看到Git Bash Here,点击可以进入黑窗口 二:配置公钥 1.查看当前状态(如果已绑定,且知道密码可以登陆,可以直接获取SSH公钥并配置即可拉取代码) git config --list 2.配置全局git用户名和邮箱 …...
ftp和sftp区别,以及xftp的使用
网上找链接找的很辛苦对吧! 网上下载的破解版还不用。而且用没多久又说要更新了,又得重新找。 这下直接把官方免费获取链接发给你,就不用在被这种事情麻烦了。 家庭/学校免费 - NetSarang Website (xshell.com):家庭/学校免费 - NetSarang W…...
C++ 编程入门(一)—— Hello World
C 是什么环境搭建第一个 C 程序本篇结语 C 是什么 C 是一种面向对象的计算机程序设计语言,由美国 AT&T 贝尔实验室的 Bjarne Stroustrup 在 20 世纪 80 年代初期发明并实现(最初这种语言被称作 “C with Classes” 带类的 C 语言)。它是一…...
openlayers系列:加载arcgis和geoserver在线离线切片
https://www.freesion.com/article/1751396517/ 1.背景 有个项目需要使用openlayer加载各种服务上发布的数据,坐标系也不同,我们都知道openalyer默认可以加载EPAG:3857,要加载4490的坐标系的数据需要重新定义一下,之后再加载。一想起要重新…...
《人工智能安全》课程总体结构
1 课程内容 人工智能安全观:人工智能安全问题、安全属性、技术体系等基本问题进行了归纳整理。人工智能安全的主要数据处理方法,即非平衡数据分类、噪声数据处理和小样本学习。人工智能技术赋能网络空间安全攻击与防御:三个典型实例及攻击图…...
unity关于匀速移动某些值的方法
可能很多人会用到Verctor3.Lerp、Mathf.LerpUnclamped等等 这种其实不是匀速 看一下这个整体差不多的逻辑 public static float Lerp(float a, float b, float t){return a (b - a) * t;};这个逻辑就是,从a值到b值,返回一个a值加(b值-a值&…...
简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
【力扣数据库知识手册笔记】索引
索引 索引的优缺点 优点1. 通过创建唯一性索引,可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度(创建索引的主要原因)。3. 可以加速表和表之间的连接,实现数据的参考完整性。4. 可以在查询过程中,…...
YSYX学习记录(八)
C语言,练习0: 先创建一个文件夹,我用的是物理机: 安装build-essential 练习1: 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件,随机修改或删除一部分,之后…...
Nginx server_name 配置说明
Nginx 是一个高性能的反向代理和负载均衡服务器,其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机(Virtual Host)。 1. 简介 Nginx 使用 server_name 指令来确定…...
基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目(父项目)主要用于依赖管理 一些需要注意的点: 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件,否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...
html-<abbr> 缩写或首字母缩略词
定义与作用 <abbr> 标签用于表示缩写或首字母缩略词,它可以帮助用户更好地理解缩写的含义,尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时,会显示一个提示框。 示例&#x…...
AI,如何重构理解、匹配与决策?
AI 时代,我们如何理解消费? 作者|王彬 封面|Unplash 人们通过信息理解世界。 曾几何时,PC 与移动互联网重塑了人们的购物路径:信息变得唾手可得,商品决策变得高度依赖内容。 但 AI 时代的来…...
[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.
ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #:…...
HubSpot推出与ChatGPT的深度集成引发兴奋与担忧
上周三,HubSpot宣布已构建与ChatGPT的深度集成,这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋,但同时也存在一些关于数据安全的担忧。 许多网络声音声称,这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...
es6+和css3新增的特性有哪些
一:ECMAScript 新特性(ES6) ES6 (2015) - 革命性更新 1,记住的方法,从一个方法里面用到了哪些技术 1,let /const块级作用域声明2,**默认参数**:函数参数可以设置默认值。3&#x…...
