我们用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. 自签名配置HTTPS

    基于AFN3.0 1.将后台提供的.cer文件文件保存至本地 2.在封装的网络请求工具类中为AFN的AFSecurityPolicy属性赋值 -(AFSecurityPolicy *)customSe ...

  2. Docker版本

    第一次接触到安装docker的时候,网上的 安装 有 lxc-docker, docker-engine, docker.io, docker-ce 这些包,肯定会有些迷糊.读完这篇文章你就清楚了. ...

  3. 实现one hot encode独热编码的两种方法

    实现one hot encode的两种方法: https://stackoverflow.com/questions/37292872/how-can-i-one-hot-encode-in-pyth ...

  4. 【leetcode 76. 最小覆盖子串】解题报告

    思路:滑动窗口思想 方法一:滑动窗口 string minWindow(string s, string t) { // 1.tdict记录T中每个字母与字母个数 // 2.维护一个滑动窗口字母的计数 ...

  5. [笔记]解决git本地仓库不能上传到gitee远程仓库的问题

    关键词:git.gitee.码云.上传远程仓库失败 1.gitee有一个远程仓库名字是CommandModel,里面只有两个README文件 2.假如我目录  D:\eclipse\workspace ...

  6. 2018宁夏邀请赛G（DFS，动态规划【VECTOR<PAIR>】）

    //代码跑的很慢四秒会超时,结尾附两秒代码(标程) #include<bits/stdc++.h>using namespace std;typedef long long ll;cons ...

  7. uva1610 聚会游戏（细节处理）

    uva1610 聚会游戏(细节处理) 输入一个n(n<=1000且为偶数)个字符串的集合D,找一个长度最短的字符串(不一定要在D中出现)S,使得D中恰好一半字符串小于等于S,另一半大于S.如果有 ...

  8. Cannot find the Session Identifier. Check PLUSTRACE role is enable

    解决方法: SQL> conn / as sysdbaConnected.SQL> @$ORACLE_HOME/rdbms/admin/utlxplan.sql; Table create ...

  9. Python使用Zero-Copy和Buffer Protocol实现高性能编程

    无论你程序是做什么的,它经常都需要处理大量的数据.这些数据大部分表现形式为strings(字符串).然而,当你对字符串大批量的拷贝,切片和修改操作时是相当低效的.为什么? 让我们假设一个读取二进制数据 ...

  10. FoundToday 隐私政策

    FoundToday 隐私政策 本应用尊重并保护所有使用服务用户的个人隐私权.为了给您提供更准确.更有个性化的服务,本应用会按照本隐私权政策的规定使用和披露您的个人信息.但本应用将以高度的勤勉.审慎义 ...