首页 > 其他分享 >VUE - 加载图片

VUE - 加载图片

时间:2023-04-23 18:33:19浏览次数:32  
标签:VUE return default jpg 加载 data 图片

VUE - 加载图片

 

方式1:

<template>
  <div style="width: 100%; height: 100%">
      <img :src="addjpg" :data-source="addjpg" alt="" />  
  </div>
</template>

<script>
import addjpg from '@/assets/business/add.jpg';

export default { 
  data() {
    return {
      addjpg,
    };
  },
}

 

 

方式2:

<template>
  <div style="width: 100%; height: 100%">
       <img :src="require('@/assets/' + src)" alt="" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      src: 'business/add.jpg',
    };
  },
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

end

 

标签:VUE,return,default,jpg,加载,data,图片
From: https://www.cnblogs.com/1285026182YUAN/p/17347386.html

相关文章

  • 向着Vue3进发,Vue2.7升级指南
    北京时间7月1号,Vue2.7正式发布,Vue2.7支持你的项目在不升级Vue3的情况下使用Vue3的特性,例如CompositionApi、setup、Cssv-bind等。与此同时,Vue2.7也是Vue2.X的最终次要版本,在这个版本之后,Vue2将进入LTS(长期支持),即从现在开始持续18个月,Vue2将不再接收新功能。对于一些老项目来说......
  • vue转换js文件 require js
    1define和require方式 不同点define用来定义一个模块的,requireconfig文件配置后才行require 加载模块define来定义模块,还是通过require来加载模块究竟什么时候去使用2TaskExcutionToday文件如何转换compoment方式 ......
  • Vue3 customRef
    视频4.customRef作用:创建一个自定义的ref,并对其依赖项跟踪和更新触发进行显式控制。实现防抖效果:<template> <inputtype="text"v-model="keyword"> <h3>{{keyword}}</h3></template><script> import{ref,customRef}from'vue�......
  • Vue3 +element-plus+ wangEditor 富文本编辑器+前端七牛云上传
    我用的vue3,element-plus,没用ts搭建wangEditor 参考地址 https://www.cnblogs.com/xbxxf/p/16791084.html七牛云安装参考地址 https://blog.csdn.net/ldoit/article/details/121533204本来就是抄大佬的,就不复制粘贴了主要是整理关于七牛云部分的代码,秉着复制就能用的原则,我......
  • [vite]: Rollup failed to resolve import "APlayer" from "./APlayer/index.vue".Thi
    这个错误提示是在你使用Vite构建项目时遇到的。错误信息提示Rollup在构建过程中无法解析import"APlayer",而且这很可能会在运行时破坏你的应用程序。这个问题的原因是,APlayer并不是一个模块,没有被正确地导出到你的项目中。为了解决这个问题,你需要告诉Rollup将APlayer......
  • 自学Vue基础笔记
    ......
  • VUE实现文件上传下载功能实例解析
    ​IE的自带下载功能中没有断点续传功能,要实现断点续传功能,需要用到HTTP协议中鲜为人知的几个响应头和请求头。 一. 两个必要响应头Accept-Ranges、ETag        客户端每次提交下载请求时,服务端都要添加这两个响应头,以保证客户端和服务端将此下载识别为可以断点续传......
  • ai问答:使用 Vue3 组合式API 和 TypeScript 封装 echarts 折线图
    <template><divref="chart"style="height:500px;"></div></template><scriptlang="ts">import{ref,onMounted,watch}from'vue'import*asechartsfrom'echarts'e......
  • 基于SpringBoot+Vue的音乐网站
    本次项目是基于SpringBoot+Vue的前后端分离项目,旨在熟练相关框架,掌握相关技术,拓展个人知识面。音乐来源:本地用户页面:Web项目亮点:根据歌词、音乐旋律、定位时间线(老师的意见)确定好方向,开始项目、收集资料、准备相关的开发环境和软件等。了解项目的结构与逻辑,确定基本功能,需求......
  • Rollup failed to resolve import "vue-demi" from
    1、背景:vue3+vite+ts的一个项目打包的时候报错了2、报错截图 3、引入截图 4、修改引入vue-demi->vue5、结果可以正常打包啦~~ ......