Question

这是我的应用程序的一个组件，它有一个没有输出的图像，我认为src是对的，我的文件树是：

应用：
1. 的src： 3.1图像 3.2 bull.jpg 3.2 utils 3.3 Carta.js

此代码来自Carta.js，其中包含Image：

import React, {Component} from 'react';
import './Carta.css'
import FlipCard from 'react-flipcard';


export default class Carta extends Component{
    render(){
        return(
           <div className="carta" onClick={this.props.seleccionarCarta}>
                <FlipCard
                     flipped={this.props.estaSiendoComparada || this.props.fueAdivinada}
                     disabled={true}
                  >
                    <div className="portada"></div>
                    <div className="contenido">
                        <ul>    
                            <li><img src={"images/toro.jpg"} alt={''} /></li>
                        </ul>
                    </div>

                </FlipCard>

            </div>
        )
    }
}

Answer 1

问题可能是由于路径不正确。这是因为你的src结构可能与构建结构不同，后者是webpack生成的结构。

导入图片可能会为捆绑包添加额外的负载，但会doing this will ensure that webpack move the images into the build folder，并提供正确的路径。

如果图像与Carta.js在同一个文件夹中，那么src应该在开头有./。

<script type="text/javascript">
function open_win(){
	window.open("../resources/Devices_overview_explained_v1_final.png","_blank", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=yes, width=805, height=700");
}
</script>

<div id="sysOverview" style="width: 855px; margin-top: 40px;">
	<div class="title" style="margin: 10px 0px 10px 0px;" align="center">
		Analyzed Devices Overview [<%
		Calendar now = Calendar.getInstance();
		int year = now.get(Calendar.YEAR);
		out.println((year - 2) + " - " + year + "]");
	%>
	    <input type="image" src="../resources/images/Infoicon_Intel.png" 
        class="tooltip_info_img" alt="" onclick="open_win()">
   </div>
</div>

我的图像没有显示在ReactJS中

1 个答案: