环境:react^16.5.2+typescript3.1.2+url-loader^1.1.2
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif|svg|ico|cur)(\?[=a-z0-9]+)?$/,
use: [{
loader: 'url-loader',
options: {
limit: 8192,
name: 'images/[hash:6].[ext]',
fallback: 'file-loader',
publicPath: './dist/'
}
}]
}
]
}
}
test.tsx
import * as React from 'react'
import m1 from './img/1.png'
import './index.less'
export default class Test extends React.Component<any, any> {
constructor(props: any) {
super(props)
}
componentDidMount () {
console.log('图片地址')
console.log(m1) // undefined
}
render() {
return (
<div className='test'>
<span>图片引入测试</span>
<img src={m1} alt='test-m1' title='test-m1'/>
</div>
)
}
}
首先我保证import m1 from './img/1.png'的路径一没有写错