Question

我有一个使用React.js和PhoneGap开发的混合移动应用程序。浏览器模拟器中的本地图像正在加载正常，但是当我在设备上安装应用程序时，图像未加载。我尝试了以下方法，但没有一个将图像加载到设备上。

1

import redcar from './RedCar.png'
<image src={redcar} />

2

var redcar = require('./RedCar.png')
<image src={redcar} />

第3

<img src="./RedCar.png" />

4 将图像复制到android \ assets文件夹中并尝试

<image src='/android_asset/www/RedCar.png' responsive />

5 的index.html

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; media-src *; img-src * filesystem: data:">

只有在设备上渲染图像的方法是在css文件中为div提供背景图像。 background-image：url（＆＃34; ./ RedCar.png＆＃34;）; 但是我需要从JSON中读取图像路径，因此我们无法使用这种方法。

我的 webpack.config.js 看起来像这样

module: {
      rules: [
        { test: /\.js$/,
          exclude: /node_modules/,
          enforce: 'pre',
        },
        { test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          query: {
            presets: ['es2015', 'react'],
            plugins: ['transform-class-properties']
          }
        },
        { test: /\.css$/, loader: 'style-loader!css-loader' },
        { test: /(\.eot|\.woff2|\.woff|\.ttf|\.svg|\.png)/, loader: 'file-loader' },
        { test: /\.ya?ml$/, loader: 'json-loader!yaml-loader' },
        { test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=10000&name=img/img-[hash:6].[ext]' }
        /*{ test: /\.html$/, loader: "html-loader" }*/
      ],
    }

我附加了目标调试的图像，其中特定图像显示错误。snapshot from device debug

知道这里出了什么问题......

React.js + PhoneGap App无法在Device上呈现图像

0 个答案: