Импортированное изображение не получает атрибут SRC, в то время как требуемое изображение получает странное имя

Последующие действия /52443554#52443554">предыдущий вопрос, я обнаружил несколько вещей. Я использую следующие две ссылки (на один и тот же файл).

var Image1 = require("../assets/author.png");
import Image2 from "../assets/author.png";

В методе render() я пытаюсь создать разметку двумя способами.

<img style={imgStyle} src={Image1} />
<img style={imgStyle} src={Image2} />

Вопреки моим ожиданиям, они отображаются по-разному.

<img style="margin: 15px;" src="1e0cf4ef57ac9ab0521646ee9c657eae.png">
<img style="margin: 15px;">

Я не уверен, что с этим делать.

1. В какое руководство было преобразовано имя файла? Могу ли я контролировать это? Должен ли я вмешиваться в это?

2. Что происходит с частью src из разметки? Может ли он просто так исчезнуть? Что я могу с этим поделать?

Я добавил файл с определением TypeScript, как показано ниже, чтобы программное обеспечение понимало, что это допустимый тип модуля. Однако не совсем уверен, что он действительно достигает этой цели.

declare module "*.png" {
  const value: any;
  export default value;
}