我们用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. （linux）修改MySQL密码方法

    1,在/etc/my.cnf末尾  加入skip-grant-tables,保存,跳过身份验证. 2,重启MySql,使刚才修改的配置生效. 3,终端输入mysql,然后再输入use mysql; 4 ...

  2. 浅谈JavaScript--闭包

    闭包的概念 由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数". 变量的作用域 要理解闭包,首先必须理解J ...

  3. [poj 1837] Balance dp

    Description Gigel has a strange "balance" and he wants to poise it. Actually, the device i ...

  4. 树的直径+rmq+（伪）单调队列 -HDU4123

    给定一棵n个点并且有边权的树,每个点的权值为该点能走的最远长度,并输入m个询问,每次询问最多有多少个编号连续的点,他们的最大最小点权差小于等于Q.N<=50000 M<=500 Q< ...

  5. Java爬虫系列一：写在开始前

    最近在研究Java爬虫,小有收获,打算一边学一边跟大家分享下,在干货开始前想先跟大家啰嗦几句. 一.首先说下为什么要研究Java爬虫 Python已经火了很久了,它功能强大,其中很擅长的一个就是写爬虫 ...

  6. File类、递归

    File类.递归 1.1File类概述 java.io.File表示文件和目录路径名的抽象类.可以对文件和文件夹进行创建删除.获取.判断.遍历等功能. 1.2路径\文件分割符,相对路径绝度路径 1.2 ...

  7. thinkphp5使用phpmailer发送邮件

    1.首先让邮箱开启smtp服务,本案例使用163的SMTP服务器: smtp.163.com发送邮件 2.下载phpmailer,在tp项目里的extends文件夹下新建一个文件夹phpmailer, ...

  8. PAT甲级——1093 Count PAT's (逻辑类型的题目)

    本文同步发布在CSDN:https://blog.csdn.net/weixin_44385565/article/details/93389073 1093 Count PAT's (25 分)   ...

  9. 关于Sumlime和其插件的安装

    因为近期就要去实习了,第一次实习,估计又要重新在公司的电脑里面安装Sublime和其插件了,于是现将本地的插件截图看看,顺便写一个教程吧哈哈. 我好像又省了一件事情哈哈,昨天因为懒没有尝试重新弄一次s ...

  10. Unity 坐标

    一. transform.position 世界坐标 transform.localposition 相对于父亲的坐标 二. 三.应用 1.物体跟随鼠标 Vector3 screenPos = Cam ...