【webpack】img[src]图片加载遇坑记

最新推荐文章于 2023-11-01 11:44:50 发布

richest_qi

最新推荐文章于 2023-11-01 11:44:50 发布

阅读量850

点赞数

分类专栏： webpack

本文链接：https://blog.youkuaiyun.com/qzw752890913/article/details/108204622

版权

webpack 专栏收录该内容

15 篇文章

订阅专栏

问题描述

<img src="../assets/imgs/logo-qq.svg" alt="here is a logo"/>时，无法加载图片

//index.js
ReactDOM.render(
    <>
    <img src="../assets/imgs/logo-qq.svg" alt="here is a logo"/> 
    </>,
    document.querySelector("#root")
)

在这里插入图片描述

background-image:url(../assets/imgs/logo-qq.svg)时，可以加载图片

import "./index.css";
ReactDOM.render(
    <>
    <span id="logo"></span>
    </>,
    document.querySelector("#root")
)

#logo{
    background-image:url(../assets/imgs/logo-qq.svg);
    background-repeat: no-repeat;
    display: inline-block;
    width: 32px;
    height: 32px;
}

问题分析

webpack递归解析依赖的过程中，没有将img[src]引用的图片计入依赖项。

解决方法

如果必须使用img[src]来引用图片的话，可以采用如下方式：

import logo from "../assets/imgs/logo-qq.svg";
ReactDOM.render(
    <>
    <img src={logo} alt="here is a logo"/> 
    </>,
    document.querySelector("#root")
)