动态设置src路径

2023-10-26

<img :src="logo" class="sidebar-logo" v-if="logo" />
data() {
        return {
            logo: require('@/assets/dt_logo.png')
        }
    }

如上动态设置图片的路径需要使用require(),不然只能写上固定路径如下

<img src="@/assets/dt_logo.png" class="sidebar-logo" />

原因如下
require 是 node 中的一个方法,他的作用是 “用于引入模块、 JSON、或本地文件”。 也就是说如果我们使用 require 来引入一个图片文件的话,那么 require 返回的就是用于引入的图片(npm 运行之后图片的编译路径)。 而如果使用字符串的话,那么则是一个 string 类型的固定字符串路径。

我们知道,src 中引入的图片应该为图片的本身路径(相对路径或者绝对路径),而 vue 项目通过 webpack 的 devServer 运行之后,默认的 vue-cli 配置下,图片会被打包成 name.hash 的图片名,在这种情况下,如果我们使用固定的 字符串路径则无法找到该图片,所以需要使用 require 方法来返回 图片的编译路径。

简单的说,使用require定义之后,你就可以动态使用了,不用require你就只能写死的。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

动态设置src路径 的相关文章

随机推荐

  • 智能指针之shared_ptr初始化,引用计数,常用操作和自定义删除器等等03

    一 share ptr 1 share ptr基础 1 共享所有权 不是被一个shared ptr拥有 而是被多个shared ptr之间相互协作 shared有额外开销 2 工作原理 利用引用计数的方法管理一片内存 每增加一个shared
  • C++ 一些知识点

    https www nowcoder com profile 7838045 myFollowings detail 3445247 链接 https www nowcoder com questionTerminal 087006d1e4
  • Red Hat Linux 7.5的安装及修改密码【详细】

    一 如何安装Red Hat Linux 7 5 详细 1 打开安装好的VMware 点击主页上的 创建新的虚拟机 选择 自定义 后 点击 下一步 2 选择虚拟机硬盘兼容性 我们选择Wordstation 14 x 3 选择稍后安装操作系统
  • -bash: ./mysqld: 没有那个文件或目录解决方法

    MySQL问题 bash mysqld 没有那个文件或目录 mysql安装路径 usr local mysql bin vi etc profile 添加环境变量 export PATH PATH usr local mysql bin 重
  • 营销活动:提升小程序的用户活跃度的关键

    在现今竞争激烈的商业环境中 小程序已成为企业私域营销的重要工具之一 然而 拥有一个小程序并不足以保证用户的活跃度 营销活动作为推动用户参与的有效方式 对于提升小程序的用户活跃度起着至关重要的作用 本文将深入探讨营销活动在提升小程序用户活跃度
  • Swagger的用法

    Swagger的用法 1 yml配置文件中引入依赖
  • C++ 内存管理

    C 内存管理 关于析构函数 1 when the desconstructor will be called 具体地说如果出现以下几种情况 程序就会执行析构函数 如果在一个函数中定义了一个对象 它是自动局部对象 当这个函数被调用结束时 对象
  • 静态代码块

    在Java类中 使用static关键字修饰的代码块称为静态代码块 当类被加载的时候 静态代码块就会被执行 由于类只会加载一次 所以静态代码块只会执行一次 在程序当中 使用静态代码块对类的成员变量进行初始化 package qmfx2 pub
  • FastAPI 使用 WebSocket创建实时应用程序

    超文本传输协议 或 HTTP 是当今互联网上最常用的协议之一 它允许客户端获取资源 例如 HTML 页面和图像 客户端 通常是浏览器 向服务器请求资源 图像 CSS 文件等 服务器响应请求的数据 它是一个严格的单向协议 服务器只会在客户端请
  • conda install 和 pip install 在ubuntu上的区别

    conda install 和 pip install 在ubuntu上的区别 pip和conda 看了很多博主的解释 已经说的很清楚了 pip pip installs packages 和conda都是包管理系统 pip最常用于安装在p
  • Merkle树

    白皮书引入 Merkel树是一种数据结构 图1 1 比特币白皮书插图 生成一个Merkel树 图1 2 来自维基百科插图 分析 自下而上 我们有四个文件 比特币系统的话就是交易 这个数据结构可以用在各种方面 L1 L2 L3 L4 四个文件
  • QT学习-数据类型转换

    文章目录 前言 一 num转QString 二 数据输出格式 三 QString拆分到QStringList 1 去除空格拆分 2 按固定长度拆分 四 QStringList转QByteArray HEX 五 uint8 t与QByteAr
  • java关键字const_java 关键字详解

    一 关键字总览 访问控制 private protected public 类 方法和变量修饰符 abstract class extends final implements interface native new static str
  • 用JAVA语言写一个计算员工月工资的程序

    一 任务需求 某公司分为多个部门 每个部门有一个经理和多个员工 每个员工根据职称发基本工资 员工的工资由基本工资 日加班工资 日缺勤工资等组成 具体需求如下所示 员工的基本信息 包括部门 职务 职称以及工资记录等信息 能记录员工的每一个职称
  • 过压保护芯片,IC电路方案集合

    随着快充适配器 QC3 0充电器 PD充电器的诞生 改变了原先USB的5V充电 增加了9V 12V的充电电压 甚至PD充电器20V也是很常见了 9V 12V 20V高电压的应用产生 虽然说9V 12V 20V的高压输出 不会被误触发 但是消
  • R-FCN+ResNet-50用自己的数据集训练模型(python版本)

    说明 本文假设你已经做好数据集 格式和VOC2007一致 并且Linux系统已经配置好caffe所需环境 博客里教程很多 下面是训练的一些修改 py R FCN源码下载地址 https github com Orpine py R FCN
  • react+antd+table实现表格数据,从头到尾循环、自动分页、滚动展示

    ts写法 分页是20 滚动过程中自动分页调接口返回数据 class Demo extends React Component
  • python调用resnet模型 对人脸图片进行特征提取,提取全连接层特征向量

    resnet feature extraction import os os chdir root caffe master examples import numpy as np import matplotlib pyplot as p
  • 汇编语言----mul指令

    mul指令 把操作数与AX相乘 最后存放在AX中 例子 mov ax 4 mov bx 5 mul bx ax 20
  • 动态设置src路径

    img class sidebar logo data return logo require assets dt logo png 如上动态设置图片的路径需要使用require 不然只能写上固定路径如下 img src assets dt