Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

webpack处理img标签路径的几种情况 #6

Open
webplus opened this issue Jul 22, 2016 · 7 comments
Open

webpack处理img标签路径的几种情况 #6

webplus opened this issue Jul 22, 2016 · 7 comments
Labels
webpack

Comments

@webplus
Copy link
Owner

webplus commented Jul 22, 2016

静态文件.html中图片路径替换

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>App</title>
</head>
<body>
    <div id="root" class=""></div>
    <img src="./publics/img/login.png" alt=这里的路径按项目的实际相对路径，经webpack处理后的生产路径static/img/login.png"">
</body>
</html>

关键点是想要webpack处理需要加html-loader,否则html中的路径原样输出

     [{
          test: /\.(jpe?g|png|gif|svg)$/,
          loader: 'url',
          query: {
            limit: 100,
            name: 'static/img/[name].[ext]?[hash:7]'
          },
          exclude: /node_modules/,
          include: path.resolve(__dirname, '../src')
      }, {
          test: /\.html$/,
          loader: "html"
        }
      ]

React.js组件中的img标签中径处理

尝试了好几种直接在scr上写路径的方法，绝对、相对地址都试了，webpack还是识别不了。
最终想起一句描述webpack的话：webpack中一切都是资源，通过下面这种方式可以替换图标路径。

// 引用资源
import img from '../../publics/img/login.png'
export default class Header extends React.Component {
  render() {
    return (
      <div className="ant-layout-header clearfix">
            <img src={img} alt="使用资源"/>
        </div>
    )
  }
}
@webplus
Copy link
Owner Author

webplus commented Jul 22, 2016

补充下图片优化的插件
https://www.npmjs.com/package/image-webpack-loader

@webplus
Copy link
Owner Author

webplus commented Jul 22, 2016

补充使用html模板的情况

var html = require('html-withimg-loader!./xxx.html');

plugins: [
    new HtmlWebpackPlugin({
        template: 'html-withimg-loader!' + path.resolve(srcDir, filename),
        filename: filename
    }),
]

@547377507
Copy link

谢谢

@jweboy
Copy link

jweboy commented Mar 23, 2017

多谢，解决了我图片加载的问题。

@Alension
Copy link

thx

@nonewbie
Copy link

nonewbie commented Nov 6, 2017

excellent

@webplus
Copy link
Owner Author

webplus commented Oct 23, 2020

补充：css文件中background url()图片路径问题

vuejs/vue-loader#481

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
webpack
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@webplus @nonewbie @547377507 @jweboy @Alension