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

所以，在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. Tomcat中出现"RFC 7230 and RFC 3986"错误的解决方法

    在用axios从前台向后台发请求时,后台报错 Invalid character found in the request target. The valid characters are defin ...

  2. spss中如何处理极端值、错误值

    spss中如何处理极端值.错误值 spss中录入数据以后,第一步不是去分析数据,而是要检验数据是不是有录入错误的,是不是有不合常理的数据,今天我们要做一个描述性统计,进而查看哪些数据是不合理的.下面是 ...

  3. python 爬虫入门1 爬取代理服务器网址

    刚学,只会一点正则,还只能爬1页..以后还会加入测试 #coding:utf-8 import urllib import urllib2 import re #抓取代理服务器地址 Key = 1 u ...

  4. 【Qt开发】解决Qt5.7.0中文显示乱码的问题

    [Qt开发]解决Qt5.7.0中文显示乱码的问题 亲测可用: 乱码主要是编码格式的问题,这里可以通过Edit菜单中选择当前文档的编码方式,选择按照UTF-8格式保存,然后输入对应的中文,保存,然后运行 ...

  5. win10家庭版安装Docker (Docker Toolbox)

    开启CPU的虚拟化功能(自行百度)之前安装了VM所以这部跳过.具体查看可以打开任务管理器->性能->cpu 查看是否有 虚拟化:已启用字样 下载Docker Toolbox  下载地址 h ...

  6. call 和 apply的定义和区别？

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...

  7. [Git] 014 远程仓库篇 第一话

    0. 前言 在 [Git] 001 初识 Git 与 GitHub 之新建仓库 中,我在 GitHub 上建了一个仓库 "interesting" 这回的任务 把远程的 " ...

  8. Charles的app抓包配置和抓包节点为unknown、乱码、手机无法上网等问题的处理

    关于手机端抓包配置Charles的一些配置,并且解决,请求存在unknown和内容为乱码的问题 关于请求节点为unknown.内容为乱码和手机端无法访问网络其实都是手机端证书配置问题导致,有的配置后还 ...

  9. Cyclic Nacklace HDU 3746 KMP 循环节

    Cyclic Nacklace HDU 3746 KMP 循环节 题意 给你一个字符串,然后在字符串的末尾添加最少的字符,使这个字符串经过首尾链接后是一个由循环节构成的环. 解题思路 next[len ...

  10. Python环境配置：anaconda+pycharm一站式解决

    https://www.cnblogs.com/yuxuefeng/p/9235431.html 不错的博文,码一下.