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 今天具体说 ...
随机推荐
- JavaScript原型和原型链?有什么特点?
一.原型 JavaScript 常被描述为一种基于原型的语言--每个对象拥有一个原型对象 当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上 ...
- 好用的liunx可视化管理工具
官网: https://www.terminal.icu/ 本地连接需要点击软件右上角切换线路到本地连接
- SQL 注入之一:Mysql 数据库(搞懂这篇就够了)
郑重声明: 本笔记编写目的只用于安全知识提升,并与更多人共享安全知识,切勿使用笔记中的技术进行违法活动,利用笔记中的技术造成的后果与作者本人无关.倡导维护网络安全人人有责,共同维护网络文明和谐. SQ ...
- Android:LitePal 在第一次创建表之后第二次创建新的表不生效
因为业务需求的增长,后续需要继续创建新的表,有可能代码没有任何报错,同时数据库也没有任何新的表加入进来. 修改 litepal.xml 的 version,如果之前是 1,那么修改为 2,总之比之前 ...
- Python批量读取HDF多波段栅格数据并绘制像元直方图
本文介绍基于Python语言gdal模块,实现多波段HDF栅格图像文件的读取.处理与像元值可视化(直方图绘制)等操作. 另外,基于gdal等模块读取.tif格式栅格图层文件的方法可以查看Pyt ...
- Django views.py 增,删,改
from django import forms from django.shortcuts import render, redirect from app01 import models # Cr ...
- 「JOI Open 2022」Giraffes 题解
设我们将要给出的观感好的排列为 \(q\),我们希望求出 \(\sum[p_i=q_i]\) 的最大值(这里指不移动的长颈鹿个数). 结论一:当且仅当左右端点有当前区间最大值或者最小值时条件才能成立. ...
- maven发布到本地仓库
<distributionManagement> <repository> <id>localRepository</id> <url>fi ...
- vue element 日期范围选择器限制:只能选今天之前的时间 || 只能选今天之后的时间 || 选取今天往后三天内
举例:只能选今天或者今天之后的时间(如下图) <el-date-picker clearable v-model="form.limitTime" type="da ...
- # huawei--流策略+NAT+单臂路由
huawei--流策略+NAT+单臂路由 项目要求: 公司内部有两个网段,分别为192.168.1.0/24和192.168.2.0/24,使用路由器R1实现单臂路由,并配置流策略,使192.168. ...