Question

所以我在React代码中加载图片时遇到问题。我设置了虚拟数据以在本地加载图像。

我的路径是public / images / nyc.jpg

在我的React文件中，我试图用引号来包装它，就像我通常在胡子中做的那样，但它并不适用于反应。

<img src='/public/images{this.props.image}' />

但它不会起作用。有没有办法可以动态加载数据或告诉webpack从公共/图像路径加载的特定jsx属性？

import React, { Component } from 'react'
import styles from './styles'

class Book extends Component {
  render(){
    const style = styles.book

    return (
      <div style={styles.container}>
        <h2 style={styles.header}>
          <div>
            <img src={this.props.image} />
          </div>
          <div>
            <span>{this.props.book.title}</span><br />

          </div>
          <a style={styles.title} href='#'>{this.props.book.author}</a>
        </h2>
        <span>{this.props.book.genre}</span><br />
        <span>{this.props.book.publishDate}</span><br />
      </div>
    )
  }
}


export default Book

我的webpack代码

var webpack = require('webpack')
var path = require('path')

module.exports = {

  entry: {
    app: './src/app.js'
  },
  output: {
    filename: 'public/build/bundle.js',
    sourceMapFilename: 'public/build/bundle.map'
  },
  devtool: '#source-map',
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(nodle_modules)/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015']
        }
      }
    ]
  }
}

在React中动态加载图像

0 个答案: