vue动态引入静态资源
vue动态引入静态资源
静态资源位置(../../assets/piecture/page404.jpg)或者(@/assets/piecture/page404.jpg)

错误引入方式
错误引入方式(一)
<template><div><img :src="`../../assets/piecture/${page404_$}.jpg`" class="page-404" /></div>
</template><script>
export default {name: "NotFound",data() {return {page404_$: "page404"};}
};
</script>
错误引入方式(二)
<template><div><img :src="page404Path" class="page-404" /></div>
</template><script>
export default {name: "NotFound",data() {return {page404Path: "../../assets/piecture/page404.jpg",};}
};
</script>
正确引入方式
正确引入方式(一)
<template><div><img src="../../assets/piecture/page404.jpg" class="page-404" /></div>
</template><script>
export default {
};
</script>
正确引入方式(二)
<template><div><img :src="page404Imply" class="page-404" /></div>
</template><script>
import page404Imply from "@/assets/piecture/page404.jpg";
export default {name: "NotFound",data() {return {page404Imply};}
};
</script>
正确引入方式(三)
<template><div><img :src="page404" class="page-404" /></div>
</template><script>
export default {name: "NotFound",data() {return {page404: require("@/assets/piecture/page404.jpg"),};}
};
</script>
正确引入方式(四)
<template><div><img :src="page404ImpAsync" class="page-404" /></div>
</template><script>
export default {name: "NotFound",data() {return {page404ImpAsync: "",};},created() {import("@/assets/piecture/page404.jpg").then((res) => {this.page404ImpAsync = res.default;});},
};
</script>
相关文章:
vue动态引入静态资源
vue动态引入静态资源 静态资源位置(../../assets/piecture/page404.jpg)或者(/assets/piecture/page404.jpg) 错误引入方式 错误引入方式(一) <template><div><img :src"../../asset…...
perl 强制覆盖拷贝文件
如果你想在Perl中进行文件拷贝时强制覆盖目标文件(如果目标文件已经存在),你可以使用标准模块File::Copy提供的cp函数,它允许你指定是否覆盖目标文件。 以下是一个示例,展示了如何在Perl中进行强制覆盖拷贝文件&#…...
C语言每日一题之整数求二进制1的个数
今天分享一道题目,用三种方法来求解 二进制1的个数 方法1 我们的十进制除10和取余数就可以得到我们每一位的数字,那我们的二进制也可 以 #include<stdio.h> int num_find_1(unsigned int n) {int count 0;while (n){if (1 n % 2){count;}n / 2…...
AcWing 4443.无限区域
原题链接:AcWing 4443.无限区域 题目来源:夏季每日一题2023 给定一个无限大的二维平面,设点 S 为该平面的中心点。 设经过点 S 的垂直方向的直线为 P,如果直线 P 是一个圆的切线,且切点恰好为点 S,那么&a…...
2D坐标系下的点的转换矩阵(平移、缩放、旋转、错切)
文章目录 1. 平移 (Translation)2. 缩放 (Scaling)3. 旋转 (Rotation)4. 错切 (Shearing)5. 镜像 (Reflection) 1. 平移 (Translation)…...
【Rabbitmq】报错:ERROR CachingConnectionFactory Channel shutdown: channel error;
报错内容 ERROR CachingConnectionFactory Channel shutdown: channel error; protocol method: #method<channel.close>(reply-code406, reply-textPRECONDITION_FAILED - unknown delivery tag 1, class-id60, method-id80) 原因 默认是自动ack,然后你代码…...
el-table组件的el-table-column电脑端使用fixed属性固定,移动端不使用固定,怎么实现?
要在电脑端使用 fixed 固定列,而在移动端不使用,可以使用 CSS 媒体查询结合 Vue 的动态绑定来实现。以下是一个示例代码: <template><el-table><el-table-columnprop"name"label"Name":fixed"isDesk…...
RocketMQ 行业分享
5.0的架构发生了重大调整,添加了一层rocketmq-proxy,可以通过grpc的方式接入。 参考 https://juejin.cn/post/7199413150973984827...
物联网场景中的边缘计算解决方案有哪些?
在物联网场景中,边缘计算是一种重要的解决方案,用于在物联网设备和云端之间进行实时数据处理、分析和决策。HiWoo Box作为工业边缘网关设备,具备边缘计算能力,包括单点公式计算、Python脚本编程以及规则引擎,它为物联网…...
【C++ 进阶】学习导论:C/C++ 进阶学习路线、大纲与目标
目录 一、C 学习路线 二、C 课程大纲与学习目标 (1)第一阶段:C 语言基础 (2)第二阶段:C 高级编程 (3)第三阶段:C 核心编程与桌面应用开发 (4…...
【数据结构】实验七:字符串
实验七 字符串实验报告 一、实验目的与要求 1)巩固对串的理解; 2)掌握串的基本操作实现; 3)掌握 BF 和 KMP 算法思想。 二、实验内容 1. 给定一个字符串ababcabcdabcde和一个子串abcd,查找字串是否在主串中出现。…...
排序算法、
描述 由小到大输出成一行,每个数字后面跟一个空格。 输入 三个整数 输出 输入三个整数,按由小到大的顺序输出。 输入样例 1 2 3 1 输出样例 1 1 2 3 输入样例 2 4 5 2 输出样例 2 2 4 5 代码一(如下)࿱…...
rbd快照管理、rbd快照克隆原理与实现、rbd镜像开机自动挂载、ceph文件系统、对象存储、配置对象存储客户端、访问Dashboard
day04 day04快照快照克隆开机自动挂载ceph文件系统使用MDS对象存储配置服务器端配置客户端访问Dashborad 快照 快照可以保存某一时间点时的状态数据快照是映像在特定时间点的只读逻辑副本希望回到以前的一个状态,可以恢复快照使用镜像、快照综合示例 # 1. 在rbd存…...
vue、vuex、vue-router初学导航配合elementui及vscode快捷键
目录 一、vue资源 1.vue知识库汇总 2.vuejs组件 3.Vue.js 组件编码规范 目标 #目录 #基于模块开发...
Elasticsearch:使用 ELSER 释放语义搜索的力量:Elastic Learned Sparse EncoderR
问题陈述 在信息过载的时代,根据上下文含义和用户意图而不是精确的关键字匹配来查找相关搜索结果已成为一项重大挑战。 传统的搜索引擎通常无法理解用户查询的语义上下文,从而导致相关性较低的结果。 解决方案:ELSER Elastic 通过其检索模型…...
MySQL数据库分库分表备份(shell脚本)
创建目录 mkdir /server/scripts 一、使用脚本实现分库备份 1、创建脚本并编写 [rootlocalhost scripts]# vim bak_db_v1.sh #!/bin/bash ######################################### # File Name:bak_db_v1.sh # Version: V1.0 # Author:Shen QL # Email:17702390000163.co…...
建造者设计模式go实现尝试
文章目录 前言代码结果总结 前言 本文章尝试使用go实现“建造者”。 代码 package mainimport ("fmt" )// 产品1。可以有不同的毫无相关的产品,这里只举一个 type Product1 struct {parts []string }// 产品1逻辑。打印组成产品的部分 func (p *Product…...
创建交互式用户体验:探索JavaScript中的Prompt功能
使用JavaScript中的Prompt功能:创建交互式用户体验 在前端开发中,JavaScript的prompt()函数是一个强大而有用的工具,它可以创建交互式的用户体验。无论是接收用户输入、进行简单的验证还是实现高级的交互功能,prompt()函数都能胜…...
自然语言处理从入门到应用——LangChain:提示(Prompts)-[提示模板:基础知识]
分类目录:《自然语言处理从入门到应用》总目录 语言模型以文本作为输入,这段文本通常被称为提示(Prompt)。通常情况下,这不仅仅是一个硬编码的字符串,而是模板、示例和用户输入的组合。LangChain提供了多个…...
OpenPCDet调试出现的问题
Open3d遇到的问题,解决方案 1.ModuleNotFoundError: No module named ‘pcdet’ 原因:没有编译安装pcdet。 解决:进入openpcdet项目根目录,修改setup.py权限,并编译: sudo chmod 777 setup.py python set…...
ES6从入门到精通:前言
ES6简介 ES6(ECMAScript 2015)是JavaScript语言的重大更新,引入了许多新特性,包括语法糖、新数据类型、模块化支持等,显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
基于FPGA的PID算法学习———实现PID比例控制算法
基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容:参考网站: PID算法控制 PID即:Proportional(比例)、Integral(积分&…...
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以? 在 Golang 的面试中,map 类型的使用是一个常见的考点,其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...
Qt Widget类解析与代码注释
#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码,写上注释 当然可以!这段代码是 Qt …...
Python如何给视频添加音频和字幕
在Python中,给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加,包括必要的代码示例和详细解释。 环境准备 在开始之前,需要安装以下Python库:…...
华为OD机考-机房布局
import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...
CRMEB 中 PHP 短信扩展开发:涵盖一号通、阿里云、腾讯云、创蓝
目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为:一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...
GO协程(Goroutine)问题总结
在使用Go语言来编写代码时,遇到的一些问题总结一下 [参考文档]:https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现: 今天在看到这个教程的时候,在自己的电…...
MFE(微前端) Module Federation:Webpack.config.js文件中每个属性的含义解释
以Module Federation 插件详为例,Webpack.config.js它可能的配置和含义如下: 前言 Module Federation 的Webpack.config.js核心配置包括: name filename(定义应用标识) remotes(引用远程模块࿰…...
华为OD最新机试真题-数组组成的最小数字-OD统一考试(B卷)
题目描述 给定一个整型数组,请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3,则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组,0<数组长度<= 100,0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...
