当前位置: 首页 > news >正文

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动态引入静态资源 静态资源位置&#xff08;../../assets/piecture/page404.jpg&#xff09;或者&#xff08;/assets/piecture/page404.jpg&#xff09; 错误引入方式 错误引入方式&#xff08;一&#xff09; <template><div><img :src"../../asset…...

perl 强制覆盖拷贝文件

如果你想在Perl中进行文件拷贝时强制覆盖目标文件&#xff08;如果目标文件已经存在&#xff09;&#xff0c;你可以使用标准模块File::Copy提供的cp函数&#xff0c;它允许你指定是否覆盖目标文件。 以下是一个示例&#xff0c;展示了如何在Perl中进行强制覆盖拷贝文件&#…...

C语言每日一题之整数求二进制1的个数

今天分享一道题目&#xff0c;用三种方法来求解 二进制1的个数 方法1 我们的十进制除10和取余数就可以得到我们每一位的数字&#xff0c;那我们的二进制也可 以 #include<stdio.h> int num_find_1(unsigned int n) {int count 0;while (n){if (1 n % 2){count;}n / 2…...

AcWing 4443.无限区域

原题链接&#xff1a;AcWing 4443.无限区域 题目来源&#xff1a;夏季每日一题2023 给定一个无限大的二维平面&#xff0c;设点 S 为该平面的中心点。 设经过点 S 的垂直方向的直线为 P&#xff0c;如果直线 P 是一个圆的切线&#xff0c;且切点恰好为点 S&#xff0c;那么&a…...

2D坐标系下的点的转换矩阵(平移、缩放、旋转、错切)

文章目录 1. 平移 &#xff08;Translation&#xff09;2. 缩放 &#xff08;Scaling&#xff09;3. 旋转 &#xff08;Rotation&#xff09;4. 错切 &#xff08;Shearing&#xff09;5. 镜像 &#xff08;Reflection&#xff09; 1. 平移 &#xff08;Translation&#xff09…...

【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&#xff0c;然后你代码…...

el-table组件的el-table-column电脑端使用fixed属性固定,移动端不使用固定,怎么实现?

要在电脑端使用 fixed 固定列&#xff0c;而在移动端不使用&#xff0c;可以使用 CSS 媒体查询结合 Vue 的动态绑定来实现。以下是一个示例代码&#xff1a; <template><el-table><el-table-columnprop"name"label"Name":fixed"isDesk…...

RocketMQ 行业分享

5.0的架构发生了重大调整&#xff0c;添加了一层rocketmq-proxy,可以通过grpc的方式接入。 参考 https://juejin.cn/post/7199413150973984827...

物联网场景中的边缘计算解决方案有哪些?

在物联网场景中&#xff0c;边缘计算是一种重要的解决方案&#xff0c;用于在物联网设备和云端之间进行实时数据处理、分析和决策。HiWoo Box作为工业边缘网关设备&#xff0c;具备边缘计算能力&#xff0c;包括单点公式计算、Python脚本编程以及规则引擎&#xff0c;它为物联网…...

【C++ 进阶】学习导论:C/C++ 进阶学习路线、大纲与目标

目录 一、C 学习路线 二、C 课程大纲与学习目标 &#xff08;1&#xff09;第一阶段&#xff1a;C 语言基础 &#xff08;2&#xff09;第二阶段&#xff1a;C 高级编程 &#xff08;3&#xff09;第三阶段&#xff1a;C 核心编程与桌面应用开发 &#xff08;4&#xf…...

【数据结构】实验七:字符串

实验七 字符串实验报告 一、实验目的与要求 1&#xff09;巩固对串的理解&#xff1b; 2&#xff09;掌握串的基本操作实现&#xff1b; 3&#xff09;掌握 BF 和 KMP 算法思想。 二、实验内容 1. 给定一个字符串ababcabcdabcde和一个子串abcd,查找字串是否在主串中出现。…...

排序算法、

描述 由小到大输出成一行&#xff0c;每个数字后面跟一个空格。 输入 三个整数 输出 输入三个整数&#xff0c;按由小到大的顺序输出。 输入样例 1 2 3 1 输出样例 1 1 2 3 输入样例 2 4 5 2 输出样例 2 2 4 5 代码一&#xff08;如下&#xff09;&#xff1…...

rbd快照管理、rbd快照克隆原理与实现、rbd镜像开机自动挂载、ceph文件系统、对象存储、配置对象存储客户端、访问Dashboard

day04 day04快照快照克隆开机自动挂载ceph文件系统使用MDS对象存储配置服务器端配置客户端访问Dashborad 快照 快照可以保存某一时间点时的状态数据快照是映像在特定时间点的只读逻辑副本希望回到以前的一个状态&#xff0c;可以恢复快照使用镜像、快照综合示例 # 1. 在rbd存…...

vue、vuex、vue-router初学导航配合elementui及vscode快捷键

目录 一、vue资源 1.vue知识库汇总 2.vuejs组件 3.Vue.js 组件编码规范 目标 #目录 #基于模块开发...

Elasticsearch:使用 ELSER 释放语义搜索的力量:Elastic Learned Sparse EncoderR

问题陈述 在信息过载的时代&#xff0c;根据上下文含义和用户意图而不是精确的关键字匹配来查找相关搜索结果已成为一项重大挑战。 传统的搜索引擎通常无法理解用户查询的语义上下文&#xff0c;从而导致相关性较低的结果。 解决方案&#xff1a;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。可以有不同的毫无相关的产品&#xff0c;这里只举一个 type Product1 struct {parts []string }// 产品1逻辑。打印组成产品的部分 func (p *Product…...

创建交互式用户体验:探索JavaScript中的Prompt功能

使用JavaScript中的Prompt功能&#xff1a;创建交互式用户体验 在前端开发中&#xff0c;JavaScript的prompt()函数是一个强大而有用的工具&#xff0c;它可以创建交互式的用户体验。无论是接收用户输入、进行简单的验证还是实现高级的交互功能&#xff0c;prompt()函数都能胜…...

自然语言处理从入门到应用——LangChain:提示(Prompts)-[提示模板:基础知识]

分类目录&#xff1a;《自然语言处理从入门到应用》总目录 语言模型以文本作为输入&#xff0c;这段文本通常被称为提示&#xff08;Prompt&#xff09;。通常情况下&#xff0c;这不仅仅是一个硬编码的字符串&#xff0c;而是模板、示例和用户输入的组合。LangChain提供了多个…...

OpenPCDet调试出现的问题

Open3d遇到的问题&#xff0c;解决方案 1.ModuleNotFoundError: No module named ‘pcdet’ 原因&#xff1a;没有编译安装pcdet。 解决&#xff1a;进入openpcdet项目根目录&#xff0c;修改setup.py权限&#xff0c;并编译&#xff1a; sudo chmod 777 setup.py python set…...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...

毫米波雷达基础理论(3D+4D)

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...