webpack4 react jsx无法渲染img

Posted

技术标签:

【中文标题】webpack4 react jsx无法渲染img【英文标题】:webpack4 react jsx can't render img 【发布时间】:2019-12-31 09:45:29 【问题描述】:
import React from 'react';
import  BrowserRouter as Router, Route, Link  from "react-router-dom";
import icon from '@/assets/images/bg.jpg'

const App = () => 
  return (
    <Router>
      <div>
        <img src=icon  /> /* success */
        <img src="./assets/images/bg.jpg"  /> /* fail */
      </div>
    </Router>
  )


export default App;

编译的 html

<div>
<img src="/img/bg.896ed149.jpg" >
<img src="./assets/images/bg.jpg" >
</div>

为什么create-react-app可以使用第二种方式?

希望图片可以用第二种方式渲染。

我的 webpack.base.config url-loader


  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: 
    limit: 8192,
    name: 'img/[name].[hash:8].[ext]'
  
,

【问题讨论】:

【参考方案1】:

图像已复制到您的构建文件夹中,但名称不匹配。删除 webpack 配置中名称的哈希


  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: 
    limit: 8192,
    name: 'img/[name].[ext]'
  
,

另一件事是您应该像这样更改图片网址

 <img src='/img/bg.jpg'/>

【讨论】:

【参考方案2】:

对不起,我弄错了。 Create-react-app 也不起作用。

【讨论】:

以上是关于webpack4 react jsx无法渲染img的主要内容,如果未能解决你的问题,请参考以下文章

WebStorm 中的 React/JSX 支持?

深入浅出的webpack4构建工具--webpack4+react构建环境(二十)

react简述-react基础-jsx语法-jsx表达式-jsx动态属性-jsx列表渲染

React:使用多个 onClick 重复渲染 JSX

ReactReact全家桶React 概述+虚拟DOM的创建与渲染+JSX

ReactReact全家桶React 概述+虚拟DOM的创建与渲染+JSX