在 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. 鼎阳SDS6204示波器的EPICS IOC调试

    经过雷雷师弟的努力,该款示波器终于调试成功,相关文件现放在gitee仓库里: https://gitee.com/lup9304/siglent/commit/99ce00d195facd87fa1c ...

  2. JAVA 进阶完结

    1.接口 这个类中 有了新的关键字 abstract 并且里面的方法没有括号 这样的类 上图就是 抽象函数与抽象类 那么继承抽象类的子类需要做什么工作呢 2.代码编写的思路 3.接口 接口跟抽像类的很 ...

  3. 三分钟实战手写Spring Boot Starter

    1 背景 在平时的开发中,开发的同学会把一些通用的方法,写成一个工具类,例如日期转换的,JSON转换的等等,方便业务后续调用,使代码更容易维护. 如果一些更常用的方法,例如鉴权的,加解密的等等,几乎每 ...

  4. socket.io实现简易聊天室功能

    本文简单介绍使用websocket实现一个简单的聊天室功能,我这里是用vite初始化的vue3项目. 在线体验地址:http://chat.lb0125.com/chat 需要安装的库: socket ...

  5. dotnet总结——类型系统

    包括2种大的类型: 引用类型和值类型, 放一张图说明继承层次: 一 值类型: 内置的值类型,如下 用户自定义值类型就是用户定义的枚举或者结构类型. 可空类型(Nullable<T>)属于 ...

  6. forEach、for in 、 for of三者的区别

    1.for 原始的遍历: 其实除了这三种方法以外还有一种最原始的遍历,自Javascript诞生起就一直用的 就是for循环,它用来遍历数组 var arr = [1,2,3,4] for(var i ...

  7. 使用Vue来制作导航栏超级简单

    在我们还没有学习Vue的时候一般都是使用JQ来制作导航栏,但是太复杂. 而使用Vue 来制作你会发现异常简单话不多说上代码 css代码随便写一写样式 HTML 部分,要给div设置一个ID   这里面 ...

  8. vue学习笔记:vue.js基础语法

    一.VUE 概述 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅 ...

  9. C++程序设计实验三 类和对象Ⅱ

    动态int型数组类Vector_int的定义实现源码(vector_int.hpp) #include <iostream> #include <cassert> using ...

  10. 使用oledb读写excel出现“操作必须使用一个可更新的查询”的解决办法

    使用oledb读写excel出现"操作必须使用一个可更新的查询"的解决办法 转自:http://www.cnblogs.com/Richinger/archive/2008/09/ ...