一般情况下我们为了能在本地显示效果，写图片路径会直接这样写，但是在实际中图片一般都是动态上传的，

所以，在vue中一般是这样的：

但是这样你会发现，图片根本显示不出来，只是显示了个图片的图标。

后来发现通过require了路径之后可以正常显示。

但是这样感觉还是不太好，因为我不想声明怎么多变量。于是就成了这样：

先把图片通过import导入，前面的../../直接改成 @ 就可以了，然后就可以通过上面图片这样的设置来显示了。

如果是要动态的话可以在方法里面通过this点属性来修改它：

vue项目图片路径问题的更多相关文章

  1. vue 关于图片路径的问题

    在vue 中,当我们想加载assets中的图片,本人按照多年的开发经验会这样写,那是没问题的 <img src="../assets.1.jpg"/> 如果我要用v-b ...

  2. Vue项目图片剪切上传——vue-cropper的使用

    最近自己在研究vue,然后做了一个小型的后台管理系统用来练手,开发过程中,想到了剪切图片上传用户头像的需求.上网百度了一番,发现好多用的都是vue-cropper.我也就用了,个人感觉还是挺好用的.现 ...

  3. HBuilderX 打包 uniapp 项目 图片路径不显示(不正确)

    打包h5项目本地服务运行正常 部署后页面显示空白 在根目录manifest.json中配置h5下的publicPath即可 "h5" : { "template" ...

  4. vue的图片路径，和背景图片路径打包后错误解决

    最近在研究vue,老实的按照官网提供的,搭建的了 webpack+vue+vuex+vue-router,,因为是自己搭建的,所以踩了不少坑,一般问题百度都有,这个背景图片的问题,查了很久才解决. 1 ...

  5. vue实现图片路径传送

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  6. freemarker与vue使用图片路径获取问题，可双单引号一起使用则可

    <el-table :data="leftPage.datas" style="width: 100%"  @selection-change=" ...

  7. vue项目sql图片动态路径引用问题

    最近遇到一个vue动态图片路径的引用问题?明明路径是正确的但是却渲染不出图片!先看我慢慢说来!! 1.当我们把图片的路径放置在data(){return:{}}中的数组中的时候,然后通过v-for循环 ...

  8. vue项目打包上线时的配置操作

    vue的图片路径,和背景图片路径打包后错误解决 2017-12-11 16:00 by muamaker, 7037 阅读, 0 评论, 收藏, 编辑 最近在研究vue,老实的按照官网提供的,搭建的了 ...

  9. vue项目遇到的坑

    一.启动项目问题 1. 如何从git上拉下项目:点我  2. 启动项目失败: 点我 and 点我 二.搭建项目问题 1. 先改分辨率,否则可能影响布局 以我的项目为例,分辨率修改位置如下: 2. .v ...

随机推荐

  1. keepalive + nginx 搭建高可用集群动态网站

    环境准备: 两台节点部署keepalived,并且设为互为主从,实现高可用. 两台从节点部署nginx以及相关组件,作为真实服务器实现动态网站上线. 一.MASTER(BACKUP)节点下载keepa ...

  2. laradock 部署 php 环境 和 laravel/lumen 框架

    环境是windows 10 版本1809,docker 版本18.09.0 首先是下载docker.git, 具体可以参考 http://laradock.io/ 要求 Docker >= 17 ...

  3. Android Studio编译报错Could not reserve enough space for 2097152KB object heap解决方法

    环境变量中添加

  4. 【ABAP系列】SAP ABAP 关于BAPI的EXTENSIONIN 一点解释

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP 关于BAPI的 ...

  5. MySQL数据类型之整型

    还一个   Decimal 就是这么创建 查看当前数据表 查看tb1得表得所有记录....

  6. [转帖]Windows下cwRsyncServer双机连续同步部署

    Windows下cwRsyncServer双机连续同步部署 https://www.cnblogs.com/nulige/p/7607503.html 找时间做一下测试 应该能更好的实现 自动部署的功 ...

  7. 迁移数据库mysql

    文档 <http://site.clairvoyantsoft.com/migrate-cloudera-scm-database-from-postgresql-to-mysql/> h ...

  8. Kotlin学习（5）类型系统

    可空性(避免空指针异常) /* *这个函数的参数代表传入一个String类型变量的实例,这代表它不可以为空 */ fun a(str:String){ println(str) } //这样调用a() ...

  9. 【ES6】对象的新功能与解构赋值

    ES6 通过字面量语法扩展.新增方法.改进原型等多种方式加强对象的使用,并通过解构简化对象的数据提取过程. 一.字面量语法扩展 在 ES6 模式下使用字面量创建对象更加简洁,对于对象属性来说,属性初始 ...

  10. win 10 自带 Ubuntu 系统的文件位置

    win 10 自带 Ubuntu 系统的文件位置 Ubuntu 作为最为流行 Linux 系统中的一种,是用来学习 Linux 相关知识是最好不过的选择.专门搞一个 Ubuntu 系统的电脑不太现实, ...