Vue中动态(import 、require)显示img图片

vue中,经常会遇到显示图片的问题,

如果是一个普通组件的话,那么这样就可以了

<img src="../assets/images/avtor.jpg" width="100%">

上文的弊端有两个:

首先,是采用绝对路径引入。如果以后图片移动了位置,需要修改代码。

其次,如果说图片是一个logo图片,同一页面内有多处用到。就需要引用多次,同理,修改也要修改多处。

所以,动态引入才是王道啊~如果想写成动态的呢,可以试试如下办法:

**图片当作一个模块加载 **
方式1:

<img :src="logo">
import logo from '@assets/images/avatar.png';
data() {return {logo}
}

方式2:

<img :src="logo">
data() {return {logo:require("@assets/images/avatar.png")}
}

注意错误写法
错误写法

这个语法 写的不对, webpack打包的时候不会处理这样的, 是当作字符串来处理了。就跟CSS里你这么写 webpack也一样不会处理,webpack会替换你的这个路径, 默认除了public目录下的静态资源原样打包,对于静态资源 有的小图会给你改成base64,
上面写的三元运算, webpack并不会执行那个运算, 因为是写在vbind里的,
require和import这种实际上是打包了以后放那里等你用。三元里运算出来的结果 直接用的是打包后的资源。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/407205.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

案例精解企业级网络构建

早就听说51CTO博客出书了,但由于放假在家,没有来得及购买.现在开学了,天天上51CTO网站,博客出书的广告打的到处都是,嘿嘿!~~想不关注都不行啊!看了各位博友对这本书的好评,终于禁不住诱惑,也在网上购买了一本.今天终于收到书了.打开包装,书真的很精美.自己非常喜欢,我是一名专科…

Oracle 中 for update 和 for update nowait 的区别

原文出处http://bijian1013.iteye.com/blog/1895412 一.for update 和 for update nowait 的区别 首先一点&#xff0c;如果只是select 的话&#xff0c;Oracle是不会加任何锁的&#xff0c;也就是Oracle对 select 读到的数据不会有任何限制&#xff0c;虽然这时候有可能另外一…

HTML DOM之节点操作方法(1)

1.checkboxObject.focus()方法用于为 checkbox 赋予焦点 2.checkboxObject.blur()方法用于让 checkbox 失去焦点 3.appendChild()在子节点列表之后插入新增的子节点 注&#xff1a;您也可以使用 appendChild()方法将一个元素移动到另一个元素中 这里就将”myList2”中最后一个…

常用端口号

端口号标识了一个主机上进行通信的不同的应用程序。 1.HTTP协议代理服务器常用端口号&#xff1a;80/8080/3128/8081/90982.SOCKS代理协议服务器常用端口号&#xff1a;10803.FTP&#xff08;文件传输&#xff09;协议代理服务器常用端口号&#xff1a;214.Telnet&#xff08;…

关于停止发表“每周新闻回顾”的通知

各位朋友&#xff1a;从2007年春节之后&#xff0c;老杨就基本上坚持每周整理当周重大IT新闻&#xff0c;如此坚持了一年。之后&#xff0c;由51CTO编辑部各位编辑轮流进行这项工作&#xff0c;算来已经超过一年半了。承蒙各位读者厚爱&#xff0c;如今新闻回顾已经成为51CTO.c…

单词统计程序

一个简单的单词统计程序&#xff0c; 问题来源: http://topic.csdn.net/u/20111114/10/2e439bbf-04c5-4042-9905-ece0bf008b97.html /* 功能&#xff1a;实现单词统计功能 */#include <stdio.h> #include <string.h>main() {char *t[20]; // 声明一个指针数组&a…

利用jQuery实现的Ajax 验证用户名是否存在

异步刷新实现方式有多种&#xff0c;也可以借助JS的多种框架&#xff0c;下面是使用jQuery框架实现的AJAX 验证用户名是否存在 jQuery.ajax概述 HTTP 请求加载远程数据。 通过jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpReq…

HTML DOM之节点操作方法(2)

9.document.hasFocus()方法返回布尔值&#xff0c;用于检测文档(或文档内的任一元素)是否获取焦点。没有参数 10.node.hasChildNodes()方法返回 true&#xff0c;如果指定节点拥有子节点&#xff0c;否则返回 false。没有参数 11.node.isDefaultNamespace(namespaceURI)方法返回…

git clone、git pull和git fetch的用法及区别

1.git clone git clone顾名思义就是将其他仓库克隆到本地&#xff0c;包括被clone仓库的版本变化。举个例子&#xff0c;你当前目录比方说是在e:/course/中&#xff0c;此时若想下载远程仓库&#xff0c;本地无需git init,直接git clone url&#xff08;url是你远程仓库的地址…

求一个整数的阶乘结果中后缀0的个数

问题描述&#xff1a; 给一个整数&#xff0c;请输出该数字阶乘的后缀0的个数&#xff0c;例如&#xff1a; 数字7&#xff0c;它的阶乘为5040&#xff0c;后面有一个0&#xff0c;则输出1&#xff1b;还有数字10&#xff0c;它的阶乘为3628800&#xff0c;后面有两个0&#x…

(转载)Android两种Tab分页的方式:TabActivity和ActivityGroup以及Android项目几种常见的应用架构...

在Android里面Tab分页&#xff0c;常用的方法有两种&#xff1a; 一、TabActivity和TabHost的结合 1.主类继承TabActivity public class Tagpage extends TabActivity 2.获取当前TabHost对象 final TabHost tabHost getTabHost(); 3.添加Tab分页标签,这里就是关键&#xff0c;…

CSS3之Transition

css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发&#xff0c;并圆滑地以动画效果改变CSS的属性值 1.语法&#xff1a;transition: property duration timing-function delay; 参数1&#xff1…

解决qrcode动态生成二维码时多次点击生成多个二维码的问题

getEwm(url){document.getElementById("qrcode").innerHTML "";var qrcode new QRCode(this.$refs.qrCodeUrl, {text: url,width: 200,height: 200,colorDark: #000000,colorLight: #ffffff,correctLevel: QRCode.CorrectLevel.H})},即生成二维码之前先将…

无线运维——J2ME和WAP运维方式的优缺点

随着信息技术的发展&#xff0c;软件产品进入了多接入渠道的新阶段&#xff0c;这些接入渠道既包括传统的Socket、Web等方式&#xff0c;也包含WAP, SMS,EMAIL等方式。网络管理软件作为软件产品的一个小的分支&#xff0c;在多接入渠道方面&#xff0c;也有了很大的发展。今天我…

没有光驱怎样从硬盘上安装Windows XP系统

不少朋友问我&#xff0c;电脑上的光驱坏了&#xff0c;要重装系统怎么办&#xff1f;下面我就给大家介绍如何从从硬盘安装系统。 一、准备工作 &#xff11;、准备一个原版XP SP3系统&#xff0c;用WINRAR解压把I386文件包直接提取出来。只需提取I386文件包,其它的不需要了。…

UVA 1025 A Spy in the Metro DP水题

简单DAG&#xff0c;每个状态有三种决策&#xff0c;原地傻等&#xff0c;上往左开的车&#xff0c;上往右开的车。 #include <cstdio> #include <cstring> #include <iostream> #include <map> #include <set> #include <vector> #includ…