在 vue 项目中引入图片,路径为相对路径时,会显示 src="[object Module]"

采用 import 方式引入图片,再设置到 src 中 会正常显示

file-loader 版本

当 file-loader 版本为4.3.0 及以上时,需要在 配置文件中手动配置属性 esModule 为 false

module.exports = {
..., module: { rules: [
{
test:/\.(png|jpg|jpeg|gif|svg)$/,
use: [
{
loader:'file-loader',
options: {
esModule: false,
name: 'images/[hash].[ext]'
}
}
]
}
]
}
}

  

vue 项目中引入图片使用相对路径,图片不显示的问题的更多相关文章

  1. 在vue项目中引入jquery

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

  2. vue项目中引入Sass

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

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

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

  4. 在vue项目中引入阿里图标库小记

    使用Vue技术栈开发不仅效率高,而且很友好,而且还有很多基于vue的UI框架,例如:element等,但是这类框架美中不足的是,图标太少.为了解决这个问题,不得不引入第三方字体库,今天以阿里图标库为例 ...

  5. 如何在Vue项目中引入jQuery?

    假设你的项目由vue-cli初始化 (e.g. vue init webpack my-project). 在你的vue项目目录下执行: npm install jquery --save-dev 打 ...

  6. vue项目中引入循环执行setInterval或者requestAnimationFrame的用法等

    项目中循环计时处理某些方法的情况还是比较常见的,一般会用setInterval来处理,但是这个方法会似的页面卡顿等使用体验不好. 所以就使用浏览器提供的requestAnimationFrame方法, ...

  7. 在 Vue 项目中引入 tinymce 富文本编辑器

    项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项 ...

  8. vue-cli构建的vue项目中引入stylus文件

    在写基于vue-cli的vue项目时,如果直接引入styl文件,会报错,需要安装stylus.stylus-loader依赖以及别名配置. 1.下载安装stylus.stylus-loader,推荐使 ...

  9. Vue项目中引入mockjs

    前提:创建好的vue项目 前言: 为什么引入mockjs:为了实现前后端分离,开发工作可以异步进行 其他工具:axios 一般的前后端交互过程:前端 --> ajax请求 --> 网络协议 ...

  10. 详解如何在vue项目中引入饿了么elementUI组件

    在开发的过程之中,我们也经常会使用到很多组件库:vue 常用ui组件库:https://blog.csdn.net/qq_36538012/article/details/82146649 今天具体说 ...

随机推荐

  1. EPICS Archiver Appliance 单点极限储存速率测试

    https://blog.csdn.net/weixin_43767046/article/details/113748775 这个测试一直在进行,虽然因为摸数据库设置而重启过并清过库,但读示波器波形 ...

  2. require.context 自动引入指定目录下的文件、组件、reducer

    1. 语法:let  webpacks = require.context (directory,useSubdirectories,regExp)  (directory:"文件路径&qu ...

  3. Typescript 回调函数、事件侦听的类型定义与注释--拾人牙慧

    实际项目中会运到的 Typescript 回调函数.事件侦听的类型定义,如果刚碰到会一脸蒙真的,我就是 这是第一次我自己对 Typescript 记录学习,所以得先说一下我与 Typescript 的 ...

  4. web自动化中如何使用cookie登录

    做web自动化的时候,登录是关键的一步.但每次频繁的输入用户名.密码导致心态有些爆炸,所以使用cookie登录势在必行.下面是两种场景的cookie登录. 一. cookie登录1 这种是界面地址跳转 ...

  5. CF1311F Moving Points

    题目传送门 思路 给出一种不需要脑子的四颗树状数组解法. 这四颗树状数组分别为:一颗维护负数,一颗维护负数个数,一颗维护正数,一颗维护正数个数. 首先考虑没有速度该怎么求. 不妨先按 \(x_i\) ...

  6. [IOI2013]robots 机器人

    题目传送门 思路 简单题,设函数 \(f_i\) 表示当时间为 \(i\) 时是否能够收拾好所有玩具,则 \(f_i\) 显然是单调的. 所以我们可以考虑二分. 设我们当前二分到 \(x\),我们先把 ...

  7. [IOI2014]friend 朋友

    题目传送门 似乎是我的第一篇 IOI 题解? 思路 虽然说是 IOI 题,但是其实并没有那么难. 这个题目描述比较杂乱,简单的描述就是:给你一些关系,你需要选出一些点,使这些点的权值和最大,并且这些点 ...

  8. CF1781D 解题乱弹

    abc1057510554 老师说,搞这种数论题,就可以在 CF 上 number theory 板刷一个 1300-1900 就可以了. 然后发现连 1800 的题都做不出来,我可以退役力 QAQ ...

  9. ENCOURAGE研究: 病情中度活动RA获得深度缓解后有望实现停药

    标签: 类风湿关节炎; TNF拮抗剂; 维持期减停 病情中度活动的RA患者在获得深度缓解后有望实现停用生物制剂 电邮发布日期: 2016年2月3日 病情中度活动的类风湿关节炎(RA)患者通过传统DMA ...

  10. python 在一个文件夹的所有文件中查找关键字

    python 在一个文件夹的所有文件中查找关键字 import os,shutil import re key='Hello' re_parttern=re.compile(r''+key,re.DO ...