img标签动态,添加相对路径_js中img标签动态赋值路径_程序员啊楠的博客-程序员秘密

技术标签: html  javascript  

目前遇到的业务是封装好的组件,需要传一个相对路径的一组图片路径

一、什么是相对路径?

基于当前文件, 其他文件的路径;

写法:

  1. ./ 当前目录(或者说同级目录)
  2. ../ 父级目录
  3. / 根目录

以上三种方法都试过,没有效果,于是用的下面的写法

  <div v-for="(item,index) in img" :key="index">
    <img :src="img[index]" />
  </div>


  data(){
    return{
        img: [
          require("@/assets/images/imgver/ver-1.png"),
          require("@/assets/images/imgver/ver-2.png"),
          require("@/assets/images/imgver/ver-3.png"),
          require("@/assets/images/imgver/ver-4.png"),
          require("@/assets/images/imgver/ver-5.png"),
          require("@/assets/images/imgver/ver-6.png"),
        ],
    }


  }

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_56650035/article/details/118877873

智能推荐

ATECC508A学习_jacky_jin1的博客-程序员秘密

1,atecc508a有高速的公钥验证机制。基于ECDSA的FIPS186-3的非对称签名机制。2,ECDH的FIPS SP800-56的非对称秘钥磋商机制。3,SHA-256的HMAC的哈希算法。主从机的操作流程。4,多达16个key的秘钥长度。5,2个计数器。6,唯一的72BIT的SN号。7,真随机数发生器。8,10KB的EEPROM的,用来保存keys.证书,数据区。9,2.0V到5.5V的...

ftp服务器的硬件配置,[计算机硬件及网络]10 FTP服务器配置.ppt_weixin_39601088的博客-程序员秘密

[计算机硬件及网络]10 FTP服务器配置配置vsftpd服务器 重新启动vsftpd服务,匿名登录服务器 登陆欢迎信息 用匿名用户ftp登录失败 配置vsftpd服务器 例2:设置FTP服务器允许的最大连接数是1 测试是否支持多用户john, catftp登录 配置vsftpd服务器 配置vsftpd服务器 修改配置文件——修改或增加: 如果设置为0,表示不受限 重启服务器 se...

Android 自定义组件相关_android xmlns:custom_YK_ing的博客-程序员秘密

自定义组件时,通常为了组件的通用性,

HLA的开发与应用_ch4028的博客-程序员秘密

在美国国防建模与仿真办公室DMSO(Defense Modeling &Simulation Office)1995年10月制定的建模与仿真主计划MSMP(Modeling and Simulation Master Plan)中,提出了未来建模/仿真的共同技术框架。它包括三个方面:高层体系结构HLA(High Level of Arch

window下安装pytorch(不用下载cuda和cudnn)(用清华镜像)_cudnn清华镜像_Tiny_uppp的博客-程序员秘密

window下安装pytorch前言:最近换了一台笔记本电脑(3060显卡),单单为了配这个pytorch环境就花了1天时间(即使我以前配过)。所以,现在想要记录一些细节防止忘记。1.anaconda事先安装好。2.anaconda默认是不走代理的,导致了我们下载pytorch的话就不能挂梯子了。(借助conda下载一挂梯子就会报proxy等错误,就很烦。我们只能从官网下载,而官网下载又巨慢(有时也可行,可能是看时间点)。最后,从清华的镜像源下载。3.30系显卡的cuda要求11以上,别装错了

Faster Rcnn 源码解析(三)—— bbox_transform.py_傲娇的程序猿的博客-程序员秘密

简介:这个代码里面主要是一些在anchor_targte_layer.py和proposals_layers.py中使用到的一些函数,比较简单,主要是帮助以上两个代码理解。# --------------------------------------------------------# Fast R-CNN# Copyright (c) 2015 Microsoft# Licensed ...

随便推点

Android 悬浮窗口_android百度音乐的悬浮_qyyl2013的博客-程序员秘密

package com.home.floatwindow;import android.app.Service;import android.content.Context;import android.content.Intent;import android.graphics.PixelFormat;import android.os.IBinder;import android

Steve Jobs经典_ajian11的博客-程序员秘密

毕加索:好的艺术家只是照抄,而伟大的艺术家窃取灵感what you see is what you get

TCP长连接与短连接的区别_tcp 长连接 与短连接 请求头 区别_陈心朔的博客-程序员秘密

1. TCP连接当网络通信时采用TCP协议时,在真正的读写操作之前,server与client之间必须建立一个连接,当读写操作完成后,双方不再需要这个连接时它们可以释放这个连接,连接的建立是需要三次握手的,而释放则需要4次握手,所以说每个连接的建立都是需要资源消耗和时间消耗的经典的三次握手示意图:经典的四次握手关闭图:2. TCP短连接我们模拟一下TCP短连接的情况,c

Android-安卓如何将aar放到到libs里并添加其为依赖?_我是giggleman的博客-程序员秘密

有的sdk并未提供链接直接添加在gradle.app里,需要我们手动操作。这里以阿里支付的aar为例子。阿里支付demo和aar下载地址: 打开下载.(aar文件在 Android-sdk 文件里)第一步:打开你的安卓Android项目文件第二步:找到并打开你的主项目Main文件第三步:在Main文件里会包含以下一些文件,libs文件夹 就是我们需要把aar文件放入进去的地方。第四步:用Android Studio 打开你的项目,左上角菜单栏选中 file -&gt;

Flink 自定义source 写入 Kafka_org.apache.flink.connector.kafka.source.kafkasourc_迷途码界的博客-程序员秘密

Flink 自定义source 写入 Kafka添加依赖构建KafkaSource参数实例构建自定义KafkaMQSource添加依赖&lt;dependency&gt; &lt;groupId&gt;org.apache.flink&lt;/groupId&gt; &lt;artifactId&gt;flink-connector-kafka_2.12&lt;/artifactId&gt; &lt;version&gt;1.13.2&lt;/version&gt; &lt;scope&gt;p

APDPlat中数据库备份恢复的设计与实现_weixin_34015336的博客-程序员秘密

2019独角兽企业重金招聘Python工程师标准&gt;&gt;&gt; ...

推荐文章

热门文章

相关标签