我们用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. Sharepoint2013商务智能学习笔记之Secure Store Service服务配置(二)

    Secure Store Service 是运行在应用程序服务器上的授权服务,它提供一个存储用户凭据的数据库,Secure Store Service 在商务智能中的地位很重要,Sharepoint商 ...

  2. .Net Core WebApi返回日期格式的问题

    环境:.net core 2.1 webapi 问题简介: 返回DateTime,前端接收到的字符有时候为2018-01-01T12:01:01,有时候为2018-01-01T01:01:01.722 ...

  3. Struts2 源码分析-----拦截器源码解析 --- ParametersInterceptor

    ParametersInterceptor拦截器其主要功能是把ActionContext中的请求参数设置到ValueStack中,如果栈顶是当前Action则把请求参数设置到了Action中,如果栈顶 ...

  4. 【leetcode 3. 无重复字符的最长子串】解题报告

    思路:滑动窗口的思想 方法一:滑动窗口 int lengthOfLongestSubstring(string s) { /* 控制一个滑动窗口,窗口内的字符都是不重复的,通过set可以做到判断字符是 ...

  5. svg动画 animate

    最近使用到svg的动画animate,简单总结下animate的主要属性: 1.定义:SVG 的animate 动画元素放在形状元素的内部,用来定义一个元素的某个属性如何踩着时点改变.在指定持续时间里 ...

  6. 2017-10-1 清北刷题冲刺班a.m

    位运算1 (bit) Time Limit:1000ms   Memory Limit:128MB 题目描述 LYK拥有一个十进制的数N.它赋予了N一个新的意义:将N每一位都拆开来后再加起来就是N所拥 ...

  7. 洛谷P2184 贪婪大陆

    题目背景 面对蚂蚁们的疯狂进攻,小FF的\(Tower\) \(defence\)宣告失败--人类被蚂蚁们逼到了\(Greed\) \(Island\)上的一个海湾.现在,小FF的后方是一望无际的大海 ...

  8. angular学习笔记【ng2-charts】插件添加

    原文:https://segmentfault.com/a/1190000008077830 1. 安装 ng2-charts npm install ng2-charts --save2. 还必须引 ...

  9. P1984 [SDOI2008]烧水问题（具体证明）

    传送门 我见过的第二恶心的题,第一是糖果传递... 以下是一堆具体的证明,自己想的,可能考虑不周,不想看也可以直接看结论 首先有一个很显然的贪心,烧开的水要尽量把热量传递出去 所以有一个比较显然的方法 ...

  10. java动态线程池LinkedBlockingQueue和SynchronousQueue比较

    import java.util.concurrent.Callable; public class MyCallable implements Callable<String> { pr ...