Cara memuat file gambar dengan webpack file-loader
Saya menggunakan webpack mengelola reactjs proyek. Saya ingin memuat gambar dalam javascript dengan webpack file-loader
. Di bawah ini adalah webpack.config.js:
const webpack = require('webpack');
const path = require('path');
const NpmInstallPlugin = require('npm-install-webpack-plugin');
const PATHS = {
react: path.join(__dirname, 'node_modules/react/dist/react.min.js'),
app: path.join(__dirname, 'src'),
build: path.join(__dirname, './dist')
};
module.exports = {
entry: {
jsx: './app/index.jsx',
},
output: {
path: PATHS.build,
filename: 'app.bundle.js',
},
watch: true,
devtool: 'eval-source-map',
relativeUrls: true,
resolve: {
extensions: ['', '.js', '.jsx', '.css', '.less'],
modulesDirectories: ['node_modules'],
alias: {
normalize_css: __dirname + '/node_modules/normalize.css/normalize.css',
}
},
module: {
preLoaders: [
{
test: /\.js$/,
loader: "source-map-loader"
},
],
loaders: [
{
test: /\.html$/,
loader: 'file?name=[name].[ext]',
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader?presets=es2015',
},
{test: /\.css$/, loader: 'style-loader!css-loader'},
{test: /\.(jpe?g|png|gif|svg)$/i, loader: "file-loader?name=/public/icons/[name].[ext]"},
{
test: /\.js$/,
exclude: /node_modules/,
loaders: ['babel-loader?presets=es2015']
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
},
output: {
comments: false,
},
}),
new NpmInstallPlugin({
save: true // --save
}),
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production")
}
}),
],
devServer: {
colors: true,
contentBase: __dirname,
historyApiFallback: true,
hot: true,
inline: true,
port: 9091,
progress: true,
stats: {
cached: false
}
}
}
Saya menggunakan baris ini untuk memuat file gambar dan menyalinnya ke dist/umum/ikon direktori dan menjaga nama file yang sama.
{test: /\.(jpe?g|png|gif|svg)$/i, loader: "file-loader?name=/public/icons/[name].[ext]"}
Tapi saya punya dua masalah untuk menggunakannya. Ketika saya menjalankan webpack
command, file gambar disalin ke dist/umum/ikon/ direktori seperti yang diharapkan. Bagaimana, ver itu juga disalin ke direktori dist dengan nama file ini "df55075baa16f3827a57549950901e90.png".
Di bawah ini adalah struktur project:
Masalah lain adalah bahwa saya menggunakan kode di bawah ini untuk mengimpor file gambar ini tapi itu tidak't tampilkan pada browser. Jika saya menggunakan url 'publik/ikon/imageview_item_normal.png' pada tag img, itu bekerja dengan baik. Bagaimana untuk menggunakan objek yang diimpor dari file gambar?
import React, {Component} from 'react';
import {render} from 'react-dom';
import img from 'file!../../public/icons/imageview_item_normal.png'
export default class MainComponent extends Component {
render() {
return (
<div style={styles.container}>
download
<img src={img}/>
</div>
)
}
}
const styles = {
container: {
width: '100%',
height: '100%',
}
}
Mengenai masalah #1
Setelah anda memiliki file-loader dikonfigurasi dalam webpack.config, setiap kali anda menggunakan impor/memerlukan tes jalan terhadap semua loader, dan dalam hal ada pertandingan lewat isi melalui loader. Dalam kasus anda, ini cocok
dan oleh karena itu anda melihat gambar yang dipancarkan ke
yang ingin perilaku.
Alasan anda juga mendapatkan hash file name, adalah karena anda akan menambahkan aplikasi tambahan inline file-loader. Anda mengimpor gambar seperti:
Awalan dengan
file!
, lewat file ke file-loader lagi, dan kali ini itu doesn't memiliki nama konfigurasi.Sehingga impor harus benar-benar hanya menjadi:
Update
Seperti dicatat oleh @cgatian, jika anda benar-benar ingin menggunakan inline file-loader, mengabaikan webpack konfigurasi global, anda bisa awalan impor dengan dua tanda seru (!!):
Mengenai masalah #2
Setelah mengimpor png, yang
img
variabel hanya menyimpan path file-loader "tahu tentang", yang lebihumum/ikon/[nama].[ext]
(aka"file-loader? nama=/umum/ikon/[nama].[ext]"
). Output dir "k" ini tidak diketahui. Anda bisa memecahkan masalah ini dalam dua cara:publicPath
properti untuk output config, yang menunjuk ke direktori output (dalam kasus anda ./dist).Contoh:
Aku punya masalah meng-upload gambar ke saya Bereaksi JS proyek. Saya mencoba untuk menggunakan file-loader untuk memuat gambar, saya juga menggunakan Babel-loader di saya bereaksi.
Saya menggunakan pengaturan berikut di webpack:
Ini membantu beban saya gambar, tapi gambar-gambar yang dimuat agak rusak. Kemudian setelah beberapa penelitian, saya datang untuk mengetahui bahwa file-loader memiliki bug merusak gambar ketika babel-loader diinstal.
Oleh karena itu, untuk mengatasi masalah saya mencoba untuk menggunakan URL-loader yang bekerja dengan baik bagi saya.
Saya diperbarui webpack dengan pengaturan sebagai berikut
Saya kemudian menggunakan perintah berikut untuk mengimpor gambar
Atau anda dapat menulis hal yang sama seperti
dan kemudian menggunakan sederhana impor
impor varName dari 'path relatif';
dan di bej menulis seperti
<img src={varName} ..../>
....
untuk gambar lainnya atributMenginstal file loader pertama:
Dan menambahkan aturan ini di webpack.config.js
webpack.config.js
anyfile.html