Image Phonegap图像不显示_Image_Reactjs_Phonegap Build

Image Phonegap图像不显示

image reactjs

Image Phonegap图像不显示,image,reactjs,phonegap-build,Image,Reactjs,Phonegap Build,我无法在phonegap构建中使用图像我读到绝对路径可能不起作用，所以我尝试了绝对路径和相对路径，仍然没有运气我包括了这样的图片： <Col key={1} xs={3}> <Image src='/tire_selected.png' responsive /> </Col> Icon.png工作正常。我不知道是什么原因导致其他图像不起作用。任何帮助都将不胜感激编辑我尝试过设置内容安全策略，如果这是我无法通过javascript设置img sr

我无法在phonegap构建中使用图像

我读到绝对路径可能不起作用，所以我尝试了绝对路径和相对路径，仍然没有运气

我包括了这样的图片：

<Col key={1} xs={3}>
  <Image src='/tire_selected.png' responsive />
</Col>

Icon.png工作正常。我不知道是什么原因导致其他图像不起作用。任何帮助都将不胜感激

编辑

我尝试过设置内容安全策略，如果这是我无法通过javascript设置img src和显示图像的问题的话

<meta http-equiv="Content-Security-Policy" content="
  default-src http://10.3.10.104/ 'self' * 'unsafe-inline';
  style-src http://10.3.10.104/ 'self' * 'unsafe-inline';
  img-src http://10.3.10.104/ 'self' * 'unsafe-inline';
  script-src http://10.3.10.104/ 'self' * 'unsafe-inline';">

这里有一个文件，因为在index.html中插入img元素时会显示它

我甚至尝试通过运行开发者工具的源文件夹中显示的路径访问它

file:///data/user/0/com.oas.exampleapp/files/downloads/app_dir/tire_deselected.png

也不起作用，我开始认为phonegap被打破了，至少与react结合使用效果很差。

编译后，将源文件放入“www”目录

您可以使用以下路径访问本地图像文件“/android\u asset/www/”

如果图像放置在根目录内的子目录中，则可以使用以下选项：

<image src='/android_asset/www/sub-direcctory/tire_selected.png' responsive />

注意：如果存在包含本地图像文件的子目录，请将其替换为您自己的子目录。

我在index.html中添加了一个img标记，并将src属性设置为“images/logo.png”，并且加载时不会出现问题

...
  <body>
    <div id="root"></div>
      <img id="footer-logo" src="images/logo.png" style="background-color: black; width: 200px;" />
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script src="js/vendor.bundle.js"></script>
    <script src="js/app.bundle.js?v=2"></script>
  </body>
</html>

为什么一个图像加载而另一个不加载？它是否与动态加载到DOM中的react组件或react的虚拟DOM有关

src属性等同于

file:///images/logo.png

。如果我像这样在#header徽标上设置src属性，它将加载：

document.getElementById('header-logo').src = cordova.file.applicationDirectory + "www/images/logo.png"

希望这能为这种奇怪的行为提供更多信息。

希望这能有所帮助。所以我也有这个问题

我所做的是，创建另一个文件夹

/images/

（重复），并且仍然使用我通过react通过

/static/components/images

文件夹导入的图像。您可以通过为staging或live添加条件来进一步了解它

答案就在这里

import Logo from '../images/logo.png';
<img src={`./${Logo}`} alt="Logo" />

从“../images/Logo.png”导入徽标；

完整示例：

import React, { Component } from 'react';
import Logo from '../images/logo.png';

class Header extends Component {
    render() {
        return(
            <div className="logo mt-3">
                <img src={`./${Logo}`} alt="Logo" />
            </div>
        );
    }
}

export default Header;

import React，{Component}来自'React'；
从“../images/Logo.png”导入徽标；
类头扩展组件{
render（）{
返回(
);
}
}
导出默认标题；

从这篇文章中得到了灵感。

我添加了引导标签。这似乎与Phonegap无关。这是怎么回事？除了phonegap构建应用程序时，图像在任何地方都可以正常工作。问题与引导无关。不同意。这不是电话缺口问题。如果删除引导并使用标准HTML，则会显示图像。唯一的例外*可能*是图像存储在设备之外-事实并非如此。既然你认为自己更聪明，那就祝你好运。HTML是标准的HTML，它是编译的。如果不清楚的话，我很抱歉。但你应该知道，如果你用git回购构建了一个phonegap应用程序，给我20分钟谢谢！我明天会检查并确认图像是否在该路径内。当然，只要尝试一下，并让我知道它是否有效。我在使用react with phonegap时遇到同样的问题，这个解决方法可以解决问题，但为什么需要像这样设置src？我知道/android_asset/www是phonegap放置文件夹/资产的物理位置，但是如果我在react呈现空间之外硬编码img（html）元素，使用img的src而不使用/android_asset/www，效果会很好，这让我想到，出于某种原因，react对路径做了一些奇怪的事情。我认为react正在发生的事情是，HTML通过javascript注入页面，类似于设置背景图像url，图像的路径与css文件所在的位置有关。我尝试在webpack.config中使用相对路径，但没有成功。我认为反应img src值的绝对路径可能是唯一的途径。

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

<image src='/android_asset/www/sub-direcctory/tire_selected.png' responsive />

...
  <body>
    <div id="root"></div>
      <img id="footer-logo" src="images/logo.png" style="background-color: black; width: 200px;" />
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script src="js/vendor.bundle.js"></script>
    <script src="js/app.bundle.js?v=2"></script>
  </body>
</html>

...
<div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0px; padding-top: 0px; letter-spacing: 0px; font-size: 24px; font-weight: 400; color: rgb(48, 48, 48); height: 64px; line-height: 64px; flex: 1 1 0px; text-align: center;">
  <img id="header-logo" src="images/logo.png" style="width: 105px; margin-top: 16px;">
</div>
...

document.getElementById('footer-logo').src === document.getElementById('header-logo').src

document.getElementById('header-logo').src = cordova.file.applicationDirectory + "www/images/logo.png"

import Logo from '../images/logo.png';
<img src={`./${Logo}`} alt="Logo" />

import React, { Component } from 'react';
import Logo from '../images/logo.png';

class Header extends Component {
    render() {
        return(
            <div className="logo mt-3">
                <img src={`./${Logo}`} alt="Logo" />
            </div>
        );
    }
}

export default Header;