vue中引用图片的几种情况

错误片段一

<!-- template -->
<img :src="p" alt="" width="500px" height="350px"> <!-- script -->
props: {
text1: String,
text2: String,
photoName: String
},
computed: {
p: {
get() {
let path=`../assets/${this.photoName}`;
return require(path);
}
}
}

此处的require使用后,会报如下错误:

错误片段二

<!-- template -->
<img :src="require(photoName)" alt="" width="500px" height="350px">
<!-- <img :src="require(`${photoName}`)" alt="" width="500px" height="350px">
这样也会报错,不要试图直接用变量
--> <!-- script -->
props: {
text1: String,
text2: String,
photoName: String
},

出现如下报错

正确引用图片

方式一:

使用img标签,实现动态切换图片

<img :src="require(`../assets/${this.photoName}`)" alt="" width="500px" height="350px">

再次强调,不能直接在require中直接填一个变量当作参数,require中的参数必须直接是一个字符串,否则就会报错

方式二;

直接使用img标签

<div id="menu"><img src="./assets/icon/menue.png"></div>

方式三:

通过父组件传对象

<!-- 父组件 -->
<!--template -->
<CardModel class="card" v-for="p in picture" :picture="p" :key="p.id"></CardModel> <!--script 片段 -->
data() {
return {
p: [{
id:'001',
photoName: require("../assets/portfolio-1.jpg")
},{
id:'002',
photoName: require("../assets/portfolio.jpg")
},{
id:'003',
photoName: require("../assets/portfolio-3.jpg")
},{
id:'004',
photoName: require("../assets/portfolio-4.jpg")
},
]
}
} <!-- 子组件 -->
<!--template -->
<img :src="picture.photoName" alt="" width="500px" height="350px"> <!--script 片段 -->
<!-- 接收对象 -->
props: {
picture:Object
},

此次记录到此结束~~

vue2.x中关于引用图片的问题的更多相关文章

  1. vue2.0中 怎么引用less?

    vue2.0中  怎么引用less? 第一步: 安装less依赖, npm install less less-loader --save 第二步: 修改webpack.config.js文件,配置l ...

  2. vue脚手架中动态引用图片的办法

    需要先导入: import logo_st_ga from '../assets/big_st_ga.png'; import logo_st_sp from '../assets/big_st_sp ...

  3. vue2.0中实现echarts图片下载-----书写中

    由于各个版本浏览器兼容性不一,所以,我们需要一个判断浏览器类型的函数来对不同的浏览器做不同的处理. 获取浏览器版本的函数 // 判断浏览器类型 IEVersion () { let userAgent ...

  4. Android ImageView 不显示JPEG图片 及 Android Studio中怎样引用图片资源

    Android ImageView 不显示JPEG图片 今天在写一个小实例,ImageView在xml里面设置的是INVISIBLE,在代码里须要设置成setVisibility(View.VISIB ...

  5. 工具分享:清理 Markdown 中没有引用的图片

    前言: 之前,我写笔记的工具一直都是 notion,而且没有写博客的习惯.但是一是由于 notion 的服务器在国外,有时候很不稳定:二是由于 notion 的分享很不方便,把笔记分享给别人点开链接之 ...

  6. vue2项目中引用外部js文件

    vue2项目目录如下(utils文件夹是自己手工建的,然后在utils里新建js文件): 使用import导入文件时,注意路径,路径不对会报错: 导入之后使用外部js函数时,直接写导入时的名字加小括号 ...

  7. Android中常见的图片加载框架

    图片加载涉及到图片的缓存.图片的处理.图片的显示等.而随着市面上手机设备的硬件水平飞速发展,对图片的显示要求越来越高,稍微处理不好就会造成内存溢出等问题.很多软件厂家的通用做法就是借用第三方的框架进行 ...

  8. 13、在 uwp应用中,给图片添加高斯模糊滤镜效果(一)

    如果在应用中,如果想要给app 添加模糊滤镜,可能第一想到的是第三方类库,比如 Win2d.lumia Imaging SDK .WriteableBitmapEx,不可否认,这些类库功能强大,效果也 ...

  9. android优化从网络中加载图片速度。。

    从网络中加载图片主要要注意两个方面的问题: 1.内存管理:图片占的内存很大,假如图片数量多,很容易让系统抛出out of memory的异常. 同时我们也要注意不同android版本中内存管理的区别. ...

  10. WindowsPhone8中实现圆形图片的生成显示

    原文 WindowsPhone8中实现圆形图片的生成显示 很多软件中(比如QQ)用到了许多圆形图片,作为用户头像等等,原始图片往往是方形的,那么怎么样将方形的图片显示成圆形呢? 一种方法是当背景为固定 ...

随机推荐

  1. CSP-S 游寄

    \(\text{reflection}\) 初赛. 本来以为上午要愉快地周测,但是伟大的虎哥让我们在四楼接着练习 然后就目睹了一个万能头+return 0编译 1min30sec 的奇迹 Win7 打 ...

  2. 1.1 大数据简介-hadoop-最全最完整的保姆级的java大数据学习资料

    目录 1 hadoop-最全最完整的保姆级的java大数据学习资料 1.1 大数据简介 1.1.1 大数据的定义 1.1.2 大数据的特点 1.1.3 大数据的应用场景 1.1.4 大数据的发展趋势及 ...

  3. 【Java SE进阶】Day03 数据结构、List、Set、Collections

    一.数据结构 1.红黑树 根黑子黑红子黑 接近平衡树(左右孩子数量相同),查询叶子快慢次数不超过2倍 二.List 1.概述 元素有序 线性存储 带有索引 可以重复 2.常用方法 增:add(I,E) ...

  4. 【Java EE】Day03 DQL、约束、数据库设计、范式、备份和还原

    〇.总结 1.DQL 聚合函数有空值需要使用ifnull函数 where不能使用聚合函数 分页开始索引的计算,及mysql和oracle的方言 2.约束 删除唯一约束DROP INDEX 列名; 3. ...

  5. 【企业流行新数仓】Day02:DWS层(按日分区的宽表)、DWT层(全量累计表)、ADS层、总结

    一.DWS层 1.概括 dwd层的数据,每日轻度聚合,建宽表 表名 粒度 dws_uv_detail_daycount 一个设备是一行 dws_user_action_daycount(只统计今天登录 ...

  6. 【大数据面试】【数仓项目】分层:ODS层、DWD层、DWS层、ADS层构成、操作

    一.ODS层 1.保持数据原貌,不做任何修改 2.数据压缩:LZO压缩,减少磁盘空间 3.创建的是分区表:可以防止后续的全表扫描 包括 用户行为:string line dt    ods_start ...

  7. DHorse日志收集原理

    实现原理 基于k8s的日志收集主要有两种方案,一是使用daemoset,另一种是基于sidecar.两种方式各有优缺点,目前DHorse是基于daemoset实现的.如图1所示: 图1 在每个k8s集 ...

  8. uni-app 动态修改主题色

    老是碰到初版制作完成没多久,就整一出说什么要更改整个项目的色彩体系.真的是宝宝心里苦啊! 起初都是通过uni项目自带的uni.scss中定义,在替换页面上对应的css.以便于达到一次性修改整体布局的样 ...

  9. 零基础入门 Java 后端开发,有哪些值得看的视频?

    目前网络上充满了大量的 Java 视频教程,然而内容却鱼龙混杂,为了防止小伙伴们踩坑,一枫结合自己的学习经验,向大家推荐一些不错的学习资源. 作为一名非科班转码选手,可以说,我是在哔哩哔哩上的研究生! ...

  10. 微服务系列之服务监控 Prometheus与Grafana

    1.为什么需要监控服务   监控服务的所属服务器硬件(如cpu,内存,磁盘I/O等)指标.服务本身的(如gc频率.线程池大小.锁争用情况.请求.响应.自定义业务指标),对于以前的小型单体服务来说,确实 ...