首页 > 其他分享 >img标签如何添加动态src地址

img标签如何添加动态src地址

时间:2023-03-16 10:46:02浏览次数:28  
标签:src name img 138.6 url 标签 gradient color

把图片当成模块用require引入图片地址(不带图片名称),后面加上循环遍历的图片名称拼接后就可以展示图片。 即 require('@/assets/images/home/' + item.url)    // item.url 为图片名称 亲测有效代码如下: <template>   <div>     <el-card class="box-card">       <div slot="header">         <div class="diplay-header">           <span style="font-weight: 700; font-size: 16px">常用功能</span>           <span style="font-size: 14px;color: rgba(48, 126, 243, 1);">设置</span>         </div>       </div>       <div class="body body-box">         <div class="div-box" v-for="item in cardList" :key="item.id">           <div class="box-circle" :style="`background: ${item.color};`">                 <img class="i-img" :src="require('@/assets/images/home/' + item.url)" alt="">           </div>           <div style="margin-top: 12px;">{{ item.name }}</div>         </div>       </div>     </el-card>   </div> </template>
<script> export default {   data() {     return {       cardList: [         {           id: 1,           name: '待分发业务处理',           url: 'img_01.png',           color: 'linear-gradient(138.6deg,#27d1d1 0%,#3fc7cd 100%);'         },         {           id: 2,           name: '待审批业务申请',           url: 'img_02.png',           color: 'linear-gradient(138.6deg,#ffc04e 0%,#ff9119 100%);'         },         {           id: 3,           name: '待审批任务',           url: 'img_03.png',           color: 'linear-gradient(138.6deg,#6fa1ff 0%,#477cff 100%);'         },         {           id: 4,           name: '预留分类',           url: 'img_04.png',           color: 'linear-gradient(138.6deg,#677eff 0%,#6469ff 100%);'         },         {           id: 5,           name: '预留分类',           url: 'img_05.png',           color: 'linear-gradient(138.6deg,#33d3d3 0%,#3fc7cd 100%);'         },         {           id: 6,           name: '预留分类',           url: 'img_06.png',           color: 'linear-gradient(138.6deg,#f6a562 0%,#f46732 100%);'         },         {           id: 7,           name: '预留分类',           url: 'img_07.png',           color: 'linear-gradient(138.6deg,#ffc04e 0%,#ff9119 100%);'         },         {           id: 8,           name: '预留分类',           url: 'img_08.png',           color: 'linear-gradient(138.6deg,#6fa1ff 0%,#477cff 100%);'         }       ]     }   } } </script>
<style lang="scss" scoped>   .body-box{     display: flex!important;     justify-content: space-around;     align-items: center;   }
  .div-box {     text-align: center;     width: 12.5%;   }
  .box-circle {     position: relative;     margin: 0px auto;     width:50px;     height:50px;     background-color: aqua;     border-radius: 35px;     i {       width: 24px;       height: 24px;     }   }   .i-img{     position:relative;     top: 9px;   }   .diplay-header {     display: flex;     justify-content: space-between;   } </style>

标签:src,name,img,138.6,url,标签,gradient,color
From: https://www.cnblogs.com/hekeying/p/17221392.html

相关文章

  • 6_JSTL格式化标签
    ​ JSTL格式化标签格式化标签库格式化标签库,也叫作fmt标签,是JTSL中的第二大组成部分,主要解决数据显示格式问题,让JSP页面的数据格式更加规范格式化标签库导入的语......
  • 6_JSTL格式化标签
    ​ JSTL格式化标签格式化标签库格式化标签库,也叫作fmt标签,是JTSL中的第二大组成部分,主要解决数据显示格式问题,让JSP页面的数据格式更加规范格式化标签库导入的语......
  • Maven POM.xml 标签详解
    pom作为项目对象模型。通过xml表示maven项目,使用pom.xml来实现。主要描述了项目:包括配置文件;开发者需要遵循的规则,缺陷管理系统,组织和licenses,项目的url,项目的依赖性,以及其......
  • 解决img中不能使用绝对
    报错原因如果页面在服务器上,浏览器出于安全考虑是不允许html访问本地文件的。解决方案1、设置映射2、相对路径3、读取本地文件,然后返回result4、通过localhost,本地端......
  • 网页基本标签
    网页基本标签<h1>这是标题标签</h1><p>这是段落标签</p><!--水平线标签--><hr/><!--换行标签-->在这里换行<br/>换行了<strong>这是加粗</strong><em>这是斜体</em>......
  • 列表标签之有序列表
    列表标签之有序列表 有序列表有序列表是一列项目,列表项目使用数字进行标记.有序列表始于<ol>标签.每个列表项始于<li>标签.<ol>  <li>老师</li>  <li>学生<......
  • 标签之文本
    标签之文本 常用文本标签标签描述<em>定义着重文字<b>定义粗体文字<i>定义斜体字<strong>定义加重语气<del>定义删除字<span>元素没有特......
  • Git标签
    Git跟其他版本控制系统一样,可以打标签(tag)标记一个版本号。发布一个版本时,我们通常先在版本库中打一个标签,这样,就唯一确定了打标签时刻的版本。将来无论什么时候,取某个标签的......
  • 标签之超文本链接
    标签之超文本链接 超链接描述HTML使用标签<a>来设置超文本链接超链接可以是一个字,一个词,或者是一组词,也可以是一幅图像,你可以点击这些内容来跳转到新的文档或者......
  • 标签之图片
    标签之图片 网站中最多的元素网站中最多的元素毋庸置疑,一定是图片<img>标签定义HTML页面中的图像<imgsrc=""alt=""title=""width=""height="">注意事项<img......