在 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. 列表(list)内置方法补充、字典(dict)内置方法、元组(tuple)内置方法、集合(set)内置方法

    目录 一.列表(list)内置方法补充 二.字典(dict)内置方法 三.元组(tuple)内置方法 四.集合(set)内置方法 一.列表(list)内置方法补充 # reverse()颠倒列表内元素 ...

  2. 搜索EE场景排序链路升级

    作者:京东零售 吕豪 背景 EE(Explore & Exploit)模块是搜索系统中改善生态.探索商品的重要链路,其目标是缓解数据马太效应导致模型对商品排序丰富性.探索性不足,带来的系统非最 ...

  3. 【NOIP2017提高组正式赛】列队

    题解 本题的解法是丰富多彩的! 线段树做法是极好的 代码非常之少 一个很显然的想法是维护 \(n+1\) 颗线段树 那要怎么维护才能不爆空间呢? 我们发现尽管 \(n \times m\) 那么大 但 ...

  4. 在VSCode中配置代码自动 eslint 格式化 (实测有用)

    一.Eslint Eslint 是用来检测和规范代码格式的工具,应用在工程化项目中,可以保证项目代码格式的一致性和规范性,大大提升了代码的可读性.   二.配置过程 本博客是讲述对一个已经引用 esl ...

  5. vue element-ui table 实现自动滚动效果

    <el-table :data="tableData" stripe class="swiper-page-table" ref="table& ...

  6. 添加weui-miniprogram

    1.打开根目录 npm init npm install weui-miniprogram --save 2.打开project.config.json 设置 "packNpmManuall ...

  7. No.2.6

    vw/vh:(能够使用vw单位设置网页元素的尺寸) 相对单位 相对视口的尺寸计算结果 vw:viewport width(1vw=1/100视口宽度) vh:viewport height(1vh=1 ...

  8. DOM04~

    事件对象及属性 事件对象 事件流 事件委托 综合案例 事件对象 获取事件对象 事件对象常用属性 什么是事件对象? 1.1 也是个对象,这个对象里有事件触发时的相关信息 1.2 例如鼠标点击事件中,事件 ...

  9. JDK的版本有多少种,Java开发者应该选择哪一种?

    JDK的版本有多少种,Java开发者应该选择哪一种?先说结果,一般情况下,我们多数会选择OpenJDK或者AdoptOpenJDK的JDK实现,因为这是最精简最标准的版本,而且没有商业风险.另外,需要 ...

  10. python-异常/文件/时间/随机数

    python-异常/文件/时间/随机数 def exception_test(): try: x = float(input("请输入被除数:")) y = float(input ...