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 今天具体说 ...
随机推荐
- JZOJ 4318. 【NOIP2015模拟11.5】俄罗斯套娃
题目大意 求逆序对个数小于等于 \(k\) 的排列数 解析 已经做过很多次了,经典得不能再经典的问题 注意本题很卡空间,要用滚动数组 \(Code\) #include<cstdio> u ...
- .Net 6 使用Log4Net
1.首先引入Log4Net的 Nuget包 第一个就是 2.复制所需配置文件(文件中包含写入文本日志和数据库日志, 自行根据注释选择所需) 取名 log4net.Config <?xml ...
- python批量修改一个文件夹下含多个文件夹中的所有图片名称
网上能找到的,大多是只对一个文件夹下所有图片进行重命名的代码. 这边实现的是,一个文件夹下有多个文件夹内图片的重命名. rename.py #!/usr/bin/python # -*- coding ...
- Word 设置页眉、页脚、页码
页眉:在 Word 文档中,每个页面的顶部区域为页眉.常用于显示文档的附加信息,可以插入时间.图形.公司微标.文档标题.文件名或作者姓名等. 页脚:页脚与页眉的作用相同,都可以作为显示文档的附加信息, ...
- 基于JavaScript的OpenGL 01 之Hello Triangle
1. 引言 本文基于JavaScript语言,描述OpenGL(即,WebGL)的绘制流程,这里描述的是OpenGL的核心模式(Core-profile) 笔者这里不过多描述每个名词.函数和细节,更详 ...
- LeetCode-1669 合并两个链表
来源:力扣(LeetCode)链接:https://leetcode.cn/problems/merge-in-between-linked-lists 题目描述 给你两个链表 list1 和 lis ...
- Mybatis-概览地图
思考: "为什么在使用 Mybatis 的时候,只需定义一个接口,不用写实现类就能使用XML中或者注解上配置好的SQL语句,就能完成对数据库 CRUD 的操作呢?" 这是因为用到了 ...
- mysql 数据库的一些参数,常用模版和调优方式
innodb_buffer_pool_size :这个参数是Mysql数据库最重要的参数之一,表示InnoDB类型的 表 和索引的最大缓存 .它不仅仅缓存 索引数据 ,还会缓存 表的数据 .这个值越大 ...
- Pytorch和torchvision版本号对应表
torch与torchvision版本对应表 torch及torchvision版本号查询 import torch print(torch.__version__) import torchvisi ...
- 淘宝sign算法和使用教程
前言 最新写的淘宝热卖插件系列里面有涉及到淘宝sign算法加密,这里博主分享一下之前找到算法和修改后的算法以及使用教程.在此希望能帮助更多的人,欢迎各位加入我的交流Q群:468458543,群内不定时 ...