Question

我有一个react组件，该组件的prop传递了一个带有图像路径的Import名称。

在这种情况下，prop值为 Ico1 。

我需要像这样通过img src中的道具：

以下代码：

import React from 'react';
import Ico1 from '../icon1.png';


 const MyComp = (props) => <div>

           <img src={props.chosenicon} alt="" />

         </div> 
     }

 </div>

 export default MyComp

我的问题是，当我添加此内容时：

<img src={Ico1} alt="" />

...它显示图像，但是如果我这样做：

<img src={props.chosenicon} alt="" />

...即使props.chosenicon的值为'Ico1'，并且typeof表示它们都是字符串，它也不显示图像。

如何使它工作以显示图像？

Answer 1

两个组件-App.js和Icon.js以及一个名为icon.jpg的图像

这是您的App.js

 import java.util.Scanner;

class AreaOfRectangle {
   public static void main (String[] args)
   {
       Scanner scanner = new Scanner(System.in);

       System.out.println("Enter the length of Rectangle:");
       double length = scanner.nextDouble();

       System.out.println("Enter the width of Rectangle:");
       double width = scanner.nextDouble();


       //Area = length*width;
       double area = length*width;
       System.out.println("Area of Rectangle is:"+area);

   }
}
class SquareAreaDemo {
   public void main extends Thread (String[] args)
   {
       System.out.println("Enter Side of Square:");
       //Capture the user's input
       Scanner scanner = new Scanner(System.in);

       //Storing the captured value in a variable
       double side = scanner.nextDouble();
       //Area of Square = side*side
       double area = side*side; 

       System.out.println("Area of Square is: "+area);

   }
}
class AreaTriangleDemo {
   public void main(String args[]) {   
      Scanner scanner = new Scanner(System.in);

      System.out.println("Enter the width of the Triangle:");
      double base = scanner.nextDouble();

      System.out.println("Enter the height of the Triangle:");
      double height = scanner.nextDouble();

      //Area = (width*height)/2
      double area = (base* height)/2;
      System.out.println("Area of Triangle is: " + area);      
   }
}

这是您的Icon.js

import React from 'react';
import icon from './icon.jpg';
import Icon from './Icon';

const App = () => (
  <div>
    <h1>This is the app</h1>
    <Icon icon={icon} />
  </div>
);

export default App;

这是一个有效的示例：https://codesandbox.io/s/4z64wyqnn9

Answer 2

也许尝试通过图像路径作为道具，所以scrollRef将是props.chosenIcon而不是../icon1.png。我认为您的问题可能是Ico1是通过引用而不是通过值传递的。

Answer 3

当前方法的问题在于最终的HTML是

<img src="Ico1" alt="" />

那显然是行不通的。
导入PNG文件时，相对位置将转换为完整URL。因此，您需要确保以src结尾的实际上是Ico1，它是与"Ico1"类似的字符串，但将类似于https://example.com/app/icon1.png。

您可以将import行移动到父组件，然后像这样传递图像：

<MyComp chosenicon={Ico1}/>

如果要将图像文件导入保留在MyComp中，则需要将"Ico1"中收到的字符串props转换为实际URL。一种方法是将其添加到您的MyComp.js：

const icons = { Ico1, Ico2 }; // no keys stated, so they are "Ico1" and "Ico2"

现在您可以使用

const MyComp = props => (
  <div>
    <img src={icons[props.chosenicon]} alt="" />
  </div>
);

反应将导入名称作为prop并添加到图像src

3 个答案: