我们用vue-cli构建项目的时候，图片的地址是后台的，可是在template中item.img放到src中是不能正常显示的为什么？

原因是：url-loader无法解析js动态生成的路径。

解决：

将图片放在src的同级的static这个文件夹中，然后地址和之前是一样的放在store的index.js中；在template中img应该这样写

<img :src='item.img'/>（注意：v-bind:src是作用于运行时的,简单来说就是绑定了一个属性,属性在程序运行过程中发生了变化,才会导致绑定src发生变化,）

这样就可以正常显示了

在vue-cli中引入图片不能正常显示的更多相关文章

  1. vue.js中引入图片

    vue中引入图片 前言:vue中引入图片时,会显示不出来,除非在css中引入.而在template中或者js动态引入时,会显示不出图片. 解决一 图片通过后端返回引入网络图片路径即可. <div ...

  2. 在vue项目中引入jquery

    在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...

  3. vue+element-ui中的图片获取与上传

    vue+element-ui中的图片获取与上传 工作上接触了一下图片的处理,图片的格式是文件流, 记录如下. 请求图片 请求图片的时候,带上{ responseType: 'blob' }, 否则图片 ...

  4. vue element-ui中引入第三方icon

    vue element-ui中引入第三方icon 把图标加入项目 设置项目名称,下载项目(项目名称自定义) 解压项目到开发目录 在main.js中全局引入css文件 修改下载下来的项目中的css文件, ...

  5. vue项目中引入Sass

    Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g, ...

  6. vue-cli3中引入图片的几种方式和注意事项

    如果你是在数据中引入图片,他是从项目中引入的应该按第一种方式引入 如果不是在数据中引入图片,按第二种方式引入

  7. 前端学习笔记系列一：10整体移动vscode代码块、VSCode 使用 stylus，配置格式化设置、在vue项目中引入bootstrap

    1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...

  8. Qt中在图片上叠加显示文字

    Qt中在图片上叠加显示文字   QCustLabel::QCustLabel(QWidget *parent):QLabel(parent){ setPixmap(QPixmap(QString::f ...

  9. 如何在vue中引入图片？

    当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形: 使用一. 我们在data里面定义好图片路径 imgUrl:'../assets/logo.png' 然后,在template模板里面 ...

随机推荐

  1. vue 绑定属性（index）

    <el-menu-item v-for="item in links" :key="item.id" v-bind:index="item.id ...

  2. HTML5学习笔记（六）web worker

    当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成.web worker 是运行在后台的 JavaScript,不会影响页面的性能,页面可以响应. 在创建 web worker ...

  3. 2018杭电多校第五场1002（暴力DFS【数位】，剪枝）

    //never use translation#include<bits/stdc++.h>using namespace std;int k;char a[20];//储存每个数的数值i ...

  4. （PHP）redis String（字符串）操作

    /** * * String操作 * 字符串操作 * */ //设置键值:成功返回true,否则返回false,键值不存在则新建,否则覆盖 $redis->set('string', 'hell ...

  5. CTO成长之路分享会

    1. 李宏玮,纪源资本合伙人GGV,设计无人机,典型的投资: VC做投资,收入利润上市技术团队,架构支撑前沿科技,以后牛逼公司以技术为主 2. 小红书tiger2003加入谷歌,之前学phpgoogl ...

  6. Eclipse项目中乱码问题的解决办法

    一.产生的原因: 1.Http协议进行通信的时候是基于请求和响应的,传输的内容我们称之为报文! 2.Http协议会按照一定的规则将报文编码,然后在读取的时候再使用响应的解码格式进行解码! 3.这个一定 ...

  7. thinkphp5.1控制器初始化函数initialize与构造函数__construct区别

    构造函数中子类的构造方法会覆盖父类的构造方法,如果要继承父类的构造方法可以加入parent::__construct(); 例子: //另一种方法,使用构造函数初始化 public function ...

  8. day13列表推导式作业详解

    1.day13题目 2,用列表推导式做下列小题 (1)过滤掉长度小于3的字符串列表,并将剩下的转换成大写字母 (2)求(x,y)其中x是0-5之间的偶数,y是0-5之间的奇数组成的元祖列表 (3)求M ...

  9. 简单的PHP+Mysql实现分页

    <?php /** * PHP+Mysql实现分页 * **/ ?> <html> <head> <meta http-equiv="Content ...

  10. angularJs1.x 版本中 uib-tabset 如何默认激活不同的标签页

     <uib-tabset> 默认有个active属性,根据官方文档,active的默认值是0,也就是说,默认显示索引为0的标签页,可以通过修改这个值来默认显示不同的索引的标签页. 示例: ...