vue的三种图片引入方式代码实例

2024-04-10 19:48:22

这篇文章主要介绍了vue的三种图片引入方式代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

首先给图片地址绑定变量：

<template>
  <img :src="imgUrl">
</template>

在script中设置变量：

//方法1：直接将图片引入为模块
require imgUrl from "../assets/test.png"

//方法2：把imgUrl放在数据中
data() {
  return {
    imgUrl:require("../assets/test.png")
   }
}
补充方法2：(在data数组中保存数据的情况）
data() {
   test: [
     {  imgUrl: require('../assets/test.png'),  id: '1'  },
   ],
   ...
}

//方法3：在生命周期函数中设置
data() {
  return {
    imgUrl:" "
   }
}

created() {
  let urlTemp = "assets/test.png";
  this.imgUrl = require("@/" + urlTemp)
}
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vue中图片Src使用变量的方法

相信不少同学在开发中都有遇到图片路径需要使用变量引入的情况,如定制化背景,动态展示头像等.可能也犯过如下错误 # 错误描述页面直接调用图片资源的方案 <img src="../../static/images/web_bg.png" /> 改写成变量形式,于是如下编写 <template> <img :src="imgSrc" /> </template> <script> export default
vue实现修改图片后实时更新

1.vue图片上传,使用element UI 上传组件自己写 <el-upload action="string" :http-request="uploadImg" :show-file-list="false"> <el-button v-perm="'b:img:upload'" size="small" type="primary">点击上传</el
vue 项目打包时样式及背景图片路径找不到的解决方式

问题描述:vue项目打包后,文件找得到,但是引用的字体及背景图片找不到: 解决方法: 主要是需要单独为 css 配置 publicPath . ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api,可以为css单独配置 publicPath . 对于用 vue-cli 生成的项目,dist 目录结构如下: dist ├── index.html └── static ├── css ├── img └── js 经
vue vantUI实现文件（图片、文档、视频、音频）上传（多文件）

说在前面网上有很多种文件上传的方法,根据公司最近的业务需求,要求实现多种文件的上传,在实现过程中,查阅了很多资料,最后,终于把功能实现了,开心! <template> <div> <v-header :left-text="`上传${columnName}`"></v-header> <div class="upload"> <div v-if="columnName === '视频'&q
vue图片加载失败时用默认图片替换的方法

前言本文主要给大家介绍的关于vue实现图片加载失败时用默认图片替换的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧方法如下原理就是给img绑定error事件,替换原有的src地址. 首先在data中创建一个defaultImg(随便起的),里面的值是该默认图片的地址: 在html页面的img标签上绑定该属性这样默认图片就设置好了: 这样做的好处就是可以提高用户体验,而图片的alt属性,是在图片显示失败后出现的文字,像下图所示,但是这样的用户体验不高: 像后台管理
vue实现axios图片上传功能

vue中实现图片上传,我这里使用的是FormData通过axios向后台发送请求,从而实现图片的上传. 在发起请求的axios中一般用qs进行序列化,但是序列化之后,FormData就传送失败,所以要区别传送的数据类型. 经过多次摸索总结了以下经验,以供参考. 首先创建一个文件夹services ,里面有两个文件 index.js 和 api.js. 我们的qs序列化和数据拦截写在index.js中 import axios from "axios"; import config fr
解决vue v-for src 图片路径问题 404

我的代码结构如下所示不能执行,会出现报错 <RadioGroup v-model="animal"> <Radio v-for='a in radio_arr' label={{a}}></Radio> </RadioGroup> export default { data(){ return{ radio_arr:['循环1','循环2','循环3'], animal:'循环2' } } } 报错信息: 修改代码如下: 修改内容为 la
详解在vue-cli3.0中自定css、js和图片的打包路径

前言我们有时候因为一些特殊需求,可能需要将js/css/img等资源文件都打包到根路径下,但vue-cli3.0的路径配置中仅有 assetsDir配置项能够配置所有的静态文件所在的文件夹,并不能针对css/js/img等资源文件分别来做设置,那么请看我如何尝试的吧! 分析众所周知,vue-cli3.0使用了webpack进行打包处理,那么我们是否可以拿到目前打包默认的一些webpack配置,并在这些配置中找到一些蛛丝马迹,从而更改配置来实现对打包路径的更改呢? 好在vue-cli3.0提供
Vue formData实现图片上传

本文实例为大家分享了Vue formData实现图片上传的具体代码,供大家参考,具体内容如下 import Vue from 'vue' /** * 图片上传 * 已注入所有Vue实例, * template模板里调用 $uploadFile(id) * 组件方法里调用 this.$uploadFile(id) */ const uploadFile = (id) => { let promise = new Promise((resolve, reject) => { let file =
vue的三种图片引入方式代码实例

这篇文章主要介绍了vue的三种图片引入方式代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下首先给图片地址绑定变量: <template> <img :src="imgUrl"> </template> 在script中设置变量: //方法1:直接将图片引入为模块 require imgUrl from "../assets/test.png" //方法2:把imgUrl放
java从命令行获取数据的三种方式代码实例

这篇文章主要介绍了java从命令行获取数据的三种方式代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下第一种:利用Scanner对象 import java.util.Scanner; public class TestInputOuput { public static void main(String[] args) { System.out.println("请输入:"); Scanner inp = new Scanne
Vue resource三种请求格式和万能测试地址

注意: 1.前端服务器测试地址的万能地址,太好用了http://jsonplaceholder.typicode.com/users,基本能响应各种请求.点击进入官网 2.这里测试只写了成功的回调函数,同时还要失败时的回调函数. HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</ti
Android 基于Bitmap的四种图片压缩方式

知识点介绍 Android 中图片主要以 Bitmap 的形式存在,所以压缩图片主要就是减少 Bitmap 的大小.Bitmap 的大小可以通过如下的公式计算得到:size = width * height * 单个像素所占字节数.因此压缩图片通过改变公式中的三个变量即可实现. 单个像素所占空间大小在 Android 中有多种,详见如下格式所占空间说明 Bitmap.Config.ALPHA_8 1B 该种格式表示图片只有透明度没有颜色,1个像素占用8位 Bitmap.Config.ARG
Vue使用三种方法刷新页面

我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面.如:用户登录成功.增加.删除.更新等. 原始方法: location.reload(); vue自带的路由跳转: this.$router.go(0); 用过的人都知道,前两者都是强制刷新页面,会出现短暂的闪烁,用户体验效果不好. 所以,我们选择第三种方式: 首先在App里面写下如下代码: <template> <div id="app"> <rout
Spark三种属性配置方式详解

随着Spark项目的逐渐成熟, 越来越多的可配置参数被添加到Spark中来.在Spark中提供了三个地方用于配置: 1.Spark properties:这个可以控制应用程序的绝大部分属性.并且可以通过 SparkConf对象或者Java 系统属性进行设置: 2.环境变量(Environment variables):这个可以分别对每台机器进行相应的设置,比如IP.这个可以在每台机器的$SPARK_HOME/ conf/spark-env.sh脚本中进行设置: 3.日志:所有的日志相关的属性可以
深入浅析JavaScript中对事件的三种监听方式

事件(Event)是JavaScript应用跳动的心脏,也是把所有东西粘在一起的胶水,当我们与浏览器中Web页面进行某些类型的交互时,事件就发生了. 第一种监听方式,也是最普遍使用的方式,是直接在代码上加载事件,产生效果: <table> <tr onmouseover='this.style.backgroundColor="red"' onmouseout='this.style.backgroundColor=""'><td>
详解IOS开发中图片上传时两种图片压缩方式的比较

IOS 图片上传时两种图片压缩方式的比较上传图片不全面的想法:把图片保存到本地,然后把图片的路径上传到服务器,最后又由服务器把路径返回,这种方式不具有扩展性,如果用户换了手机,那么新手机的沙盒中就没有服务器返回的图片路径了,此时就无法获取之前已经上传了的头像了,在项目中明显的不可行. 上传图片的正确方式:上传头像到服务器一般是将图片NSData上传到服务器,服务器返回一个图片NSString地址,之后再将NSString的路径转为url并通过url请求去更新用户头像(用户头像此时更新的便是NS
浅谈JS中的三种字符串连接方式及其性能比较

工作中经常会碰到要把2个或多个字符串连接成一个字符串的问题,在JS中处理这类问题一般有三种方法,这里将它们一一列出顺便也对它们的性能做个具体的比较. 第一种方法用连接符"+"把要连接的字符串连起来: str="a"; str+="b"; 毫无疑问,这种方法是最便捷快速的,如果只连接100个以下的字符串建议用这种方法最方便. 第二种方法以数组作为中介用 join 连接字符串: var arr=new Array(); arr.push(a);
Spring 3.x中三种Bean配置方式比较详解

以前Java框架基本都采用了XML作为配置文件,但是现在Java框架又不约而同地支持基于Annotation的"零配置"来代替XML配置文件,Struts2.Hibernate.Spring都开始使用Annotation来代替XML配置文件了:而在Spring3.x提供了三种选择,分别是:基于XML的配置.基于注解的配置和基于Java类的配置. 下面分别介绍下这三种配置方式:首先定义一个用于举例的JavaBean. package com.chinalife.dao public cl

vue的三种图片引入方式代码实例

相关推荐

随机推荐