【Webpack 踩坑】img 标签图片加载不出来

news2024/11/17 17:46:10

问题:在htmlimg标签路径解析错误,导致加载不出来

一直用框架开发,好久没用过webpack写原生代码,一下子踩了好多坑…

图片位置
图片位置

其中一个就是在html中写了图片地址

<!-- src/pages/index.html -->
<img class="img" src="@/assets/images/logo_lw.png" alt="logo">

不管怎么改控制台都显示下面的报错
控制台报错
看了好多帖子都写的是打包后,图片有问题。但是我是想在webpack-dev-server下显示出来


解决方案:
1.在js文件引入:

<img class="img" src="" alt="logo">
// index.js
import img from '@/assets/images/logo_lw.png';
document.querySelector(".img").setAttribute("src", img);

2.webpack.config.js配置html-loader

// webpack.config.js
module.exports = {
	mode: 'development',
	module: {
		rules: [
			{
				test: /.html$/,
                loader: 'html-loader',
                options: {
                    esModule: false
                }
			}
		]
	}
}

(因为html文件成功加载了,以为不用html-loader。后来想起webpack只能理解javascriptjson,抱着试一下的态度加上去,没想到还真有用)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1963123.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

鸿蒙(HarmonyOS)DatePicker+TimePicker时间选择控件

一、操作环境 操作系统: Windows 11 专业版、IDE:DevEco Studio 3.1.1 Release、SDK:HarmonyOS 3.1.0&#xff08;API 9&#xff09; 二、效果图 可实现两种选择方式&#xff0c;可带时分选择&#xff0c;也可不带&#xff0c;使用更加方便。 三、代码 SelectedDateDialog…

Qt for MCUs 2.8 LTS已发布

本文翻译自&#xff1a;Qt for MCUs 2.8 LTS released 原文作者&#xff1a;Qt Group高级产品经理Yoann Lopes 我们很高兴地宣布Qt for MCUs 2.8 LTS版本已发布&#xff0c;该版本带来了激动人心的新变化&#xff0c;如GUI的构建模块、构建工具工作流程的改进、对Infineon TRA…

书生大模型实战营闯关 - 8GB显存玩转书生大模型demo

创建开发机 创建一个使用10%GPU算力&#xff0c;cuda12.2系统的开发机&#xff0c;并启动。由于开发机的IO性能较差&#xff0c;开发机共享盘中已经创建好了本次实验所需要的conda环境 # 启动共享的conda环境 conda activate /root/share/pre_envs/icamp3_demo部署cli模型 创…

解读Solana流动性质押发展现状:市场格局的悄然转变

随着区块链技术的发展和去中心化金融&#xff08;DeFi&#xff09;生态系统的壮大&#xff0c;流动性质押&#xff08;Liquid Staking&#xff09;已经成为市场中的热门话题。尽管以太坊在这一领域占据了主导地位&#xff0c;但Solana也在快速追赶&#xff0c;并展现出其独特的…

微服务事务管理(分布式事务问题 理论基础 初识Seata XA模式 AT模式 )

目录 一、分布式事务问题 1. 本地事务 2. 分布式事务 3. 演示分布式事务问题 二、理论基础 1. CAP定理 1.1 ⼀致性 1.2 可⽤性 1.3 分区容错 1.4 ⽭盾 2. BASE理论 3. 解决分布式事务的思路 三、初识Seata 1. Seata的架构 2. 部署TC服务 3. 微服务集成Se…

通俗易懂生成式人工智能(Generative AI)

生成式人工智能&#xff08;Generative AI&#xff09; 人工智能是目标&#xff0c;生成式人工智能就是我们的目标之一。 基本概念 什么是生成式人工智能&#xff1f; 生成式人工智能就是让机器产生复杂的、有结构的物件&#xff0c;如&#xff1a;文本、语音、图像等。而这…

笔试练习day1

目录 数字统计题目解析解法(枚举数字拆分)代码 两个数组的交集题目解析解法哈希表代码 点击消除题目解析解法栈代码 感谢各位大佬对我的支持,如果我的文章对你有用,欢迎点击以下链接 &#x1f412;&#x1f412;&#x1f412; 个人主页 &#x1f978;&#x1f978;&#x1f97…

4 款最佳 C# 无头浏览器

摘要&#xff1a; 在当今大数据时代&#xff0c;高效的数据采集成为众多项目的关键一环。对于偏好C#语言的开发者而言&#xff0c;无头浏览器是实现网页自动化交互、数据抓取的强大工具。本文将深入探讨四款顶尖的C#无头浏览器库&#xff0c;分析它们的特性和应用场景&#xf…

No J-Link found

线拔了&#xff0c;重插即可&#xff0c;顺便按按板子上的按钮 这里配置如下图

根据需求修改el-tab的默认样式

根据需求修改el-tab的默认样式 样式代码&#xff1a; <style lang"scss" scoped>//去掉了最下面的那条线:deep(.el-tabs--card > .el-tabs__header){border-bottom: none}//单独给每一项添加下边框、修改背景色:deep(.el-tabs--card > .el-tabs__heade…

多人协作不“撞车”,可道云teamOS网盘的编辑锁功能你知道吗?

在团队协作的世界里&#xff0c;文件编辑就像是一条繁忙的街道&#xff0c;每个人都是驾驶者&#xff0c;试图在文件上留下自己的痕迹。想象一下&#xff0c;如果没有任何规则和秩序&#xff0c;这条街道将会是一片混乱&#xff0c;编辑冲突和版本“撞车”将会频频发生。 今天…

Gartner发布2024年数据安全成熟度曲线:人工智能和量子计算驱动的32项数据安全相关技术发展变化

安全和风险管理领导者正在为当今人工智能和未来量子计算的影响做准备。合成数据、后量子密码学和此技术成熟度曲线上的其他创新可以帮助降低数据安全和隐私风险并实现业务目标。 需要知道的 过去几年&#xff0c;随着人工智能的使用以及隐私和人工智能相关立法的不断加强&…

idea mapper.xml跳转到databse对应的表或字段

idea mapper.xml跳转到databse对应的表或字段 1、安装Database Navigator插件 2、配置数据类型 setting- > language -> sql Dialects中 的选项设为 对应的数据库 3、链接数据库

最新盘点!国内外10款超热门的CRM系统对比!

在数字化时代&#xff0c;企业对于高效、智能的管理系统需求日益增加。无论是RM系统还是其他各类管理工具&#xff0c;都成为了企业提升竞争力的关键。本文将围绕国内外十款超热门的CRM系统展开对比&#xff0c;从公司背景、专业实力、产品核心能力以及解决方案能力四个维度进行…

DNS查询服务器的基本流程以及https的加密过程

DNS查询服务器的基本流程&#xff0c;能画出图更好&#xff0c;并说明为什么DNS查询为什么不直接从单一服务器查询ip&#xff0c;而是要经过多次查询&#xff0c;多次查询不会增加开销么&#xff08;即DNS多级查询的优点&#xff09;&#xff1f; 用户发起请求&#xff1a;用户…

找到/打开pupprteer对应chrome版本

前期提要&#xff1a;导出pdf的时候&#xff0c;会用pupprteer启动一个浏览器实例&#xff0c;再打开指定页面进行打印&#xff0c;页面写成什么样&#xff0c;导出的pdf内容就是什么样&#xff0c;听起来很正常。 但是遇到了调试的时候页面显示很正常&#xff0c;而导出的内容…

echarts柱状图——堆叠、多柱堆叠,并在顶部展示总和

实现的效果 要求 1、堆叠数据 2、可以有多个柱子堆叠 3、要展示每个堆叠柱子的总和 options配置 const xData ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]; const morningIncome …

chrome/edge浏览器插件开发入门与加载使用

同学们可以私信我加入学习群&#xff01; 正文开始 前言一、插件与普通前端项目二、开发插件——manifest.json三、插件使用edge浏览器中使用/加载插件chrome浏览器中使用/加载插件 总结 前言 chrome插件的出现&#xff0c;初衷可能是为了方便用户更好地控制浏览器&#xff0c…

数据结构与算法-二分搜索树

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; 文章目录 引言一、二分搜…

[ONVIF系列 - 01] 简介 - 设备发现 - 相关工具

1.背景知识 这个事项对我而言是个新知&#xff0c;我从&#xff1a;https://www.cnblogs.com/liwen01/p/17337916.html 跳转到了&#xff1a;ONVIF协议网络摄像机&#xff08;IPC&#xff09;客户端程序开发&#xff08;1&#xff09;&#xff1a;专栏开篇_onvif 许振坪-CSDN…