Question

大家好，我是reactjs的新手，开发一个应用程序，我在使用组件显示图像时遇到一个问题。

这是我的App.jsx

import React from 'react';

class App extends React.Component {
render() {
  return (
     <Image
            source={require('./AAA.jpg')}
            style={styles.container}>
            <Text style={styles.welcome}>
              Welcome to React Native!
            </Text>
            <Text style={styles.instructions}>
              To get started, edit index.ios.js
            </Text>
            <Text style={styles.instructions}>
              Press Cmd+R to reload,{'\n'}
              Cmd+D or shake for dev menu
            </Text>
          </Image>
  );


 const styles = StyleSheet.create({
 container: {
   flex: 1,
   width: undefined,
   height: undefined,
   backgroundColor:'transparent',
   justifyContent: 'center',
   alignItems: 'center',
    },
  });
 }
}

export default App;

和webpack.config.js如下

var config = {
entry: './main.js',

output: {
  path: __dirname +'D:\myapp',
  filename: 'index.js',
},

devServer: {
  inline: true,
  port: 8080
},

module: {
  loaders: [
     {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',

        query: {
           presets: ['es2015', 'react']
        }
     },
     {
            test: /\.(ico|jpg|png|gif|eot|svg|ttf|woff|woff2|json)$/,
            loader: 'file',
            query: {
              name: '[name]--[hash:8].[ext]',
            },
          }
  ]


  }
  }

module.exports = config;

在这个webpack中，我还为jpg图像添加了加载程序

但是图像没有显示。我不知道该怎么做。

请给我建议解决我的问题这是我的第一个应用程序，我遇到了问题

Answer 1

您无需使用html图像标记

定义特定加载程序来加载图像

只需使用

＆LT; img src="image path" height="20px" witdh="20px"/>

它可以正常工作，如果你想要响应式图像，那么你可以使用react bootstrap图像标签

Answer 2

不要向webpack添加任何内容，并通过查看丢失导入的代码使用 import React, {Component} from 'react'; import {Image, Text, StyleSheet} from 'react-native' 并在组件外部声明样式表。

反应图像组件不起作用

2 个答案: