vue 项目中引入图片使用相对路径,图片不显示的问题
在 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 项目中引入图片使用相对路径,图片不显示的问题的更多相关文章
- 在vue项目中引入jquery
在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...
- vue项目中引入Sass
Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g, ...
- 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap
1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...
- 在vue项目中引入阿里图标库小记
使用Vue技术栈开发不仅效率高,而且很友好,而且还有很多基于vue的UI框架,例如:element等,但是这类框架美中不足的是,图标太少.为了解决这个问题,不得不引入第三方字体库,今天以阿里图标库为例 ...
- 如何在Vue项目中引入jQuery?
假设你的项目由vue-cli初始化 (e.g. vue init webpack my-project). 在你的vue项目目录下执行: npm install jquery --save-dev 打 ...
- vue项目中引入循环执行setInterval或者requestAnimationFrame的用法等
项目中循环计时处理某些方法的情况还是比较常见的,一般会用setInterval来处理,但是这个方法会似的页面卡顿等使用体验不好. 所以就使用浏览器提供的requestAnimationFrame方法, ...
- 在 Vue 项目中引入 tinymce 富文本编辑器
项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项 ...
- vue-cli构建的vue项目中引入stylus文件
在写基于vue-cli的vue项目时,如果直接引入styl文件,会报错,需要安装stylus.stylus-loader依赖以及别名配置. 1.下载安装stylus.stylus-loader,推荐使 ...
- Vue项目中引入mockjs
前提:创建好的vue项目 前言: 为什么引入mockjs:为了实现前后端分离,开发工作可以异步进行 其他工具:axios 一般的前后端交互过程:前端 --> ajax请求 --> 网络协议 ...
- 详解如何在vue项目中引入饿了么elementUI组件
在开发的过程之中,我们也经常会使用到很多组件库:vue 常用ui组件库:https://blog.csdn.net/qq_36538012/article/details/82146649 今天具体说 ...
随机推荐
- 合肥光源纵向震荡数据源相关PV
中控室束测界面上加上了BCM部分,看下面截图,可以发现里面的两张二维图像内容还是蛮丰富的,我想其数据很值得大家研究研究,现把相关PV公布给大家,感兴趣的可以通过这两幅图的数据计算出更多的物理量,比如每 ...
- h5与原生app通信的各种功能
import config from '@/config/index'; import cubeModule from '_public/CubeModule.json'; const _MIDEA_ ...
- Postgresql实现不同用跨模式访问
1.修改参数 2.创建两个用户 创建a1 create user a1 connection limit-1 password '123456'; alter user a1 SUPERUSER; g ...
- sqlite3数据库Linux 系统移植和使用
sqlite3数据库是一个小型的数据库,当数据量不大,要求不是特别高的时候,是个不错的选择. 在Linux上移植和使用也非常的方便. 本示例是在硬件全志r528 .linux5.4 上验证的. 移植操 ...
- ASP输出生成Word 、Excel、Txt文件的方法
在ASP中生成Word文件.Excel文件和Txt文件,参考了微软的官方文档,自己简单弄了下,基本可以实现了,不足之处,望指导!下面言归正传. 1.用ASP生成Word文档,代码示例: 01 < ...
- 子路由path路径带 ‘/‘与不带
子路由不带 / : $router.push('/layout/home') 浏览器地址栏显示: http:xxxxxxxxxx/layout/home 带 / : $router.push('/us ...
- ElementUI导航连续点击报错
原因 vue项目中连续多次点击路由, 原因是在路由跳转时不允许同一个路由添加多次 错误解决: 吧vue-router换成3.0版本 import Vue from 'vue' import Route ...
- 【剑指Offer】【树】【双向链表】二叉搜索树与双向链表
题目:输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. A:二叉树中每个节点都有一个left指针指向左节点,一个right指针指向右节 ...
- kvm 透传显卡至win10虚拟机
环境 已安装nvidia 显卡 驱动 操作系统:CentOS Linux release 7.9.2009 (Core) 内核版本:Linux 5.4.135-1.el7.elrepo.x86_64 ...
- jenkins配置自动化
1.自定义jenkins自定义工作空间 --从SVN获取的项目会更新到对应空间 2.安装svn插件,填写项目地址 3.构建定时触发器,每天23点执行 4.执行调用用例脚本,解决测试报告样式展示问题 5 ...