在 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. Windows环境下FTP Server在局域网内的搭建

    什么是FTP? File transfer protocol sreveris a computer software that facilitate the secure rxchange of f ...

  2. SQL 注入之:SQL Server 数据库

    郑重声明: 本笔记编写目的只用于安全知识提升,并与更多人共享安全知识,切勿使用笔记中的技术进行违法活动,利用笔记中的技术造成的后果与作者本人无关.倡导维护网络安全人人有责,共同维护网络文明和谐. SQ ...

  3. LeetCode-386 字典序排数

    来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/lexicographical-numbers 题目描述 给你一个整数 n ,按字典序返回范围 [ ...

  4. Git多分支 远程仓库 协同开发以及解决冲突

    目录 一.Git多分支及远程仓库 1.Git多分支 2.正常密码链接远程仓库 3.ssh公钥私钥方式链接远程仓库 三.协同开发及解决冲突 1.协同开发 2.解决冲突 四.线上分支合并及远程仓库回滚 1 ...

  5. 97、UserAgentUtils

    user-agent-utils 是一个用来解析 User-Agent 字符串的 Java 类库. 其能够识别的内容包括: 超过150种不同的浏览器: 7种不同的浏览器类型: 超过60种不同的操作系统 ...

  6. 01.JavaSE学习

    一.java入门 java三大版本(write once,run anywhere) JavaSE:标准版(用于桌面开发,控制台开发) javaME:嵌入式开发(手机,小家电) javaEE:以jav ...

  7. 使用iperf测试网卡性能

    1.目标 测试网卡通信性能,同时可以通过改变连接方式(从两台PC网线直连,切换到通过交换机连接)测试交换机最高速率性能. 2.使用工具 硬件:两台PC机(本例用win10 64位).数根网线.交换机 ...

  8. 【C学习笔记】day4-1 在屏幕上输出以下图案

    1.在屏幕上输出以下图案: * *** ***** ******* ********* *********** ************* *********** ********* ******* ...

  9. mysql库操作msyql

    查看所有数据库 show databases; 查看当前使用的数据库 select database(); 使用数据库 use 数据库名; 创建数据库 create database 数据库名 cha ...

  10. Anaconda jupyter notebook 出现 kernel error 解决办法

    kenel出现错误如图: 解决办法 首先打开Anaconda Prompt输入jupyter kernelspec list查看安装的内核和位置进入安装目录,打开kernel.jason, 查看pyt ...