动态添加图片 React Webpack
Dynamically Add Images React Webpack
我一直在尝试弄清楚如何通过 React 和 Webpack 动态添加图像。我在 src/images 下有一个图像文件夹,在 src/components/index 下有一个组件。我正在使用 url-loader 和以下 webpack
配置
{
test: /\.(png|jpg|)$/,
loader: 'url-loader?limit=200000'
}
在我知道的组件中,我可以在创建组件之前为文件顶部的特定图像添加 require(image_path),但我想要 make通用组件,并让它使用 属性 以及从父组件传递的图像路径。
我试过的是:
<img src={require(this.props.img)} />
对于实际的 属性 我已经尝试了几乎所有我能想到的从项目根目录、从 React 应用程序根目录和组件本身到图像的路径。
文件系统
|-- src
| ` app.js
| `--images
| ` image.jpg
| ` image.jpg
| `-- components
| `parent_component.js
| `child_component.js
父组件基本上只是一个容纳多个子组件的容器,所以...
<ChildComponent img=data.img1 />
<ChildComponent img=data.img2 />
etc....
有什么方法可以使用带有 url-loader 的 react 和 webpack 来做到这一点,还是我只是走错了路来解决这个问题?
您没有在捆绑包中嵌入图像。它们是通过浏览器调用的。所以它;
var imgSrc = './image/image1.jpg';
return <img src={imgSrc} />
使用此处描述的 url-loader (SurviveJS - Loading Images),然后您可以在您的代码中使用:
import LogoImg from 'YOUR_PATH/logo.png';
和
<img src={LogoImg}/>
编辑:精确,使用此技术将图像内嵌在 js 存档中。它对于小图像可能是值得的,但要明智地使用该技术。
因此您必须在 parent 组件上添加导入语句:
class ParentClass extends Component {
render() {
const img = require('../images/img.png');
return (
<div>
<ChildClass
img={img}
/>
</div>
);
}
}
并在 child class:
class ChildClass extends Component {
render() {
return (
<div>
<img
src={this.props.img}
/>
</div>
);
}
}
如果您在服务器端捆绑代码,那么没有什么能阻止您直接从 jsx 获取资源:
<div>
<h1>Image</h1>
<img src={require('./assets/image.png')} />
</div>
更新:这只测试了服务器端渲染(通用Javascript)这是我的boilerplate.
仅使用文件加载器,您可以动态加载图像 - 技巧是使用 ES6 模板字符串,以便 Webpack 可以获取它:
这不会工作。 :
const myImg = './cute.jpg'
<img src={require(myImg)} />
要解决此问题,只需使用模板字符串即可:
const myImg = './cute.jpg'
<img src={require(`${myImg}`)} />
webpack.config.js :
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
module.exports = {
entry : './src/app.js',
output : {
path : './dist',
filename : 'app.bundle.js'
},
plugins : [
new ExtractTextWebpackPlugin('app.bundle.css')],
module : {
rules : [{
test : /\.css$/,
use : ExtractTextWebpackPlugin.extract({
fallback : 'style-loader',
use: 'css-loader'
})
},{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['react','es2015']
}
},{
test : /\.jpg$/,
exclude: /(node_modules)/,
loader : 'file-loader'
}]
}
}
如果您正在寻找一种从图像中导入所有图像的方法
// Import all images in image folder
function importAll(r) {
let images = {};
r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
return images;
}
const images = importAll(require.context('../images', false, /\.(gif|jpe?g|svg)$/));
然后:
<img src={images['image-01.jpg']}/>
您可以在此处找到原始线程:使用 webpack 从目录动态导入图像
这是代码
import React, { Component } from 'react';
import logo from './logo.svg';
import './image.css';
import Dropdown from 'react-dropdown';
import axios from 'axios';
let obj = {};
class App extends Component {
constructor(){
super();
this.state = {
selectedFiles: []
}
this.fileUploadHandler = this.fileUploadHandler.bind(this);
}
fileUploadHandler(file){
let selectedFiles_ = this.state.selectedFiles;
selectedFiles_.push(file);
this.setState({selectedFiles: selectedFiles_});
}
render() {
let Images = this.state.selectedFiles.map(image => {
<div className = "image_parent">
<img src={require(image.src)}
/>
</div>
});
return (
<div className="image-upload images_main">
<input type="file" onClick={this.fileUploadHandler}/>
{Images}
</div>
);
}
}
export default App;
我一直在尝试弄清楚如何通过 React 和 Webpack 动态添加图像。我在 src/images 下有一个图像文件夹,在 src/components/index 下有一个组件。我正在使用 url-loader 和以下 webpack
配置 {
test: /\.(png|jpg|)$/,
loader: 'url-loader?limit=200000'
}
在我知道的组件中,我可以在创建组件之前为文件顶部的特定图像添加 require(image_path),但我想要 make通用组件,并让它使用 属性 以及从父组件传递的图像路径。
我试过的是:
<img src={require(this.props.img)} />
对于实际的 属性 我已经尝试了几乎所有我能想到的从项目根目录、从 React 应用程序根目录和组件本身到图像的路径。
文件系统
|-- src
| ` app.js
| `--images
| ` image.jpg
| ` image.jpg
| `-- components
| `parent_component.js
| `child_component.js
父组件基本上只是一个容纳多个子组件的容器,所以...
<ChildComponent img=data.img1 />
<ChildComponent img=data.img2 />
etc....
有什么方法可以使用带有 url-loader 的 react 和 webpack 来做到这一点,还是我只是走错了路来解决这个问题?
您没有在捆绑包中嵌入图像。它们是通过浏览器调用的。所以它;
var imgSrc = './image/image1.jpg';
return <img src={imgSrc} />
使用此处描述的 url-loader (SurviveJS - Loading Images),然后您可以在您的代码中使用:
import LogoImg from 'YOUR_PATH/logo.png';
和
<img src={LogoImg}/>
编辑:精确,使用此技术将图像内嵌在 js 存档中。它对于小图像可能是值得的,但要明智地使用该技术。
因此您必须在 parent 组件上添加导入语句:
class ParentClass extends Component {
render() {
const img = require('../images/img.png');
return (
<div>
<ChildClass
img={img}
/>
</div>
);
}
}
并在 child class:
class ChildClass extends Component {
render() {
return (
<div>
<img
src={this.props.img}
/>
</div>
);
}
}
如果您在服务器端捆绑代码,那么没有什么能阻止您直接从 jsx 获取资源:
<div>
<h1>Image</h1>
<img src={require('./assets/image.png')} />
</div>
更新:这只测试了服务器端渲染(通用Javascript)这是我的boilerplate.
仅使用文件加载器,您可以动态加载图像 - 技巧是使用 ES6 模板字符串,以便 Webpack 可以获取它:
这不会工作。 :
const myImg = './cute.jpg'
<img src={require(myImg)} />
要解决此问题,只需使用模板字符串即可:
const myImg = './cute.jpg'
<img src={require(`${myImg}`)} />
webpack.config.js :
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
module.exports = {
entry : './src/app.js',
output : {
path : './dist',
filename : 'app.bundle.js'
},
plugins : [
new ExtractTextWebpackPlugin('app.bundle.css')],
module : {
rules : [{
test : /\.css$/,
use : ExtractTextWebpackPlugin.extract({
fallback : 'style-loader',
use: 'css-loader'
})
},{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['react','es2015']
}
},{
test : /\.jpg$/,
exclude: /(node_modules)/,
loader : 'file-loader'
}]
}
}
如果您正在寻找一种从图像中导入所有图像的方法
// Import all images in image folder
function importAll(r) {
let images = {};
r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
return images;
}
const images = importAll(require.context('../images', false, /\.(gif|jpe?g|svg)$/));
然后:
<img src={images['image-01.jpg']}/>
您可以在此处找到原始线程:使用 webpack 从目录动态导入图像
这是代码
import React, { Component } from 'react';
import logo from './logo.svg';
import './image.css';
import Dropdown from 'react-dropdown';
import axios from 'axios';
let obj = {};
class App extends Component {
constructor(){
super();
this.state = {
selectedFiles: []
}
this.fileUploadHandler = this.fileUploadHandler.bind(this);
}
fileUploadHandler(file){
let selectedFiles_ = this.state.selectedFiles;
selectedFiles_.push(file);
this.setState({selectedFiles: selectedFiles_});
}
render() {
let Images = this.state.selectedFiles.map(image => {
<div className = "image_parent">
<img src={require(image.src)}
/>
</div>
});
return (
<div className="image-upload images_main">
<input type="file" onClick={this.fileUploadHandler}/>
{Images}
</div>
);
}
}
export default App;