動態添加圖像反應Webpack

我一直在努力弄清楚如何通過React和Webpack動態添加圖像。我有一個圖像文件夾src/images和src/components/index下的組件。我使用的URL裝載機具有以下配置的的WebPack動態添加圖像反應Webpack

{ 
     test: /\.(png|jpg|)$/, 
     loader: 'url-loader?limit=200000' 
    }

在我所知道的成分，我可以添加要求（IMAGE_PATH）在該文件的頂部的特定圖像之前創建的組件，但我希望使組件具有通用性，並使它具有從父組件傳遞的圖像路徑的屬性。

我曾嘗試是：

<img src={require(this.props.img)} />

因爲我已經試過幾乎我能想到的，從項目的根圖像的每個路徑的實際屬性，從反應的應用程序根目錄，從組件本身。

文件系統

|-- src 
| ` app.js 
| `--images 
|  ` image.jpg 
|  ` image.jpg 
| `-- components 
|  `parent_component.js 
|  `child_component.js

父組件基本上只是將孩子抱這樣的倍數的容器......

<ChildComponent img=data.img1 /> 
<ChildComponent img=data.img2 /> 
etc....

有沒有什麼辦法，其中爲此使用的反應和的WebPack與url-loader或我只是走了一個錯誤的路徑來接近呢？

來源

2015-09-16 pandorz

使用URL裝載機，這裏https://christianalfoni.github.io/react-webpack-cookbook/Inlining-images.html描述，你就可以在你的代碼中使用：

import LogoImg from 'YOUR_PATH/logo.png';

和

<img src={LogoImg}/>

來源

2016-02-17 11:02:02 mlorber

我想知道如何加載此映像從和返回圖像的API。 –

我不確定要做什麼：如果你想讓用戶瀏覽器從API加載圖像，它與webpack無關。只需使用變量（可能在調用API後定義）作爲 src。這裏的想法是將圖像包含在源代碼和webpack存檔中。（請參閱http://stackoverflow.com/questions/32612912/dynamically-add-images-react-webpack/35454832?noredirect=1#comment56021739_32613874） – mlorber

謝謝，這個工程很好。您引用的文章最後還提到了如果您使用的是React，那麼您使用babel-plugin-transform-react-jsx-img-import自動生成導入。這樣你就可以寫出 –

您不會將圖像嵌入到包中。他們通過瀏覽器被調用。所以就是;

var imgSrc = './image/image1.jpg'; 

return <img src={imgSrc} />

來源

2015-09-16 16:21:01

但是如果你不知道在構建時的圖像？如果圖像URL是在運行時組成的呢？ – JBCP

。不是特別困難！ – cormacrelf

您正在使用的加載器的目標實際上是不在代碼中使用url，並且如果足夠小（更好的perfs），可以將該圖像嵌入到存檔中 – mlorber

所以，你必須對你的父母添加一條import語句組件：

class ParentClass extends Component { 
    render() { 
    const img = require('../images/img.png'); 
    return (
     <div> 
     <ChildClass 
      img={img} 
     /> 
     </div> 
    ); 
    } 
}

，並在子類：

class ChildClass extends Component { 
    render() { 
    return (
     <div> 
      <img 
      src={this.props.img} 
      /> 
     </div> 
    ); 
    } 
}

來源

2016-06-16 07:42:12 MCSLI

如果要捆綁你在服務器端的代碼，那麼就沒有什麼直接從JSX需要資產阻止你：

<div> 
    <h1>Image</h1> 
    <img src={require('./assets/image.png')} /> 
</div>

來源

2016-09-24 13:00:41

這就是我需要用於我的情況，我不知道圖像文件，直到構建組件。我傳入一個'imageFilename'道具，然後使用''。感謝發佈。 –

@BrendanMoore，但請記住，在你的情況下，一個捆綁器（比如說webpack）會把'images'文件夾中的所有圖像添加到最終捆綁包中。 –

UPDATE：這隻用服務器端渲染測試（通用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' 
    }] 
    } 
}

來源

2017-07-24 03:34:30

對我來說缺少的是在webpack配置中的測試。謝謝。 –

動態添加圖像反應Webpack

回答

相關問題