Типизировать src,The expected type comes from property 'src' which is declared here on type?

Question

[tar1kkk]

import React from 'react';
import cartEmptyImg from '../assets/empty-cart.png';
import { Link } from 'react-router-dom';


const CartEmpty: React.FC = () => {
	return (
		<>
			<div className='cart cart--empty'>
				<h2>Корзина пустая :(</h2>
				<p>
					Вероятней всего ,вы не заказывали еще пиццу.<br />
					для того ,чтобы заказать пиццу ,перейди на главную страницу.
				</p>
				<img src={cartEmptyImg} />
				<Link to='/' className='button button--black' >
					<span>Вернуться назад</span>
				</Link>
			</div>
		</>
	);
}

export default CartEmpty;

Answer 1

[Aetae]

Ответ на твой вопрос на самом деле зависит от того, что за говно у тебя в cartEmptyImg.
Т.к. голый js не умеет в принципе импортировать что-то кроме js модулей - это полностью зависит от твоей конфигурации загрузчиков и настроек, о которых в вопросе не сказано ни слова.
Даже хотя-бы полный текст ошибки частично пролил бы свет на этот вопрос, но конечно же "лишняя" информация в вопросе не нужна, да.

В целом тут может быть несколько вариантов:
1. Используется простой загрузчик, который в импорт подставит простой url или data uri, тогда у тебя хреново настроен тип для png: должен быть где-то файлик условно вида:

png.d.ts

declare module '*.png' {
  const png: string;
  export default png;
}

2. Используется какая-то более продвинутая хрень(генератор спрайтов, генератор react-копонентов, и т.д.). Тут уж сам смотри что там и куда это что-то надо пихать, потому как без инфы тут можно только гадать на кофейной гуще.

Comments

[tar1kkk]

Спасибо большое)

Answer 2

[Denkuwus]

Эта ошибка, вероятно, вызвана ошибкой типа в вашем коде. В TypeScript атрибут src элемента img должен иметь тип string, но вы пытаетесь присвоить ему значение неизвестного типа.

Чтобы исправить эту ошибку, вам нужно убедиться, что значение, которое вы присваиваете атрибуту src, является строкой. В этом случае похоже, что вы импортируете файл изображения и пытаетесь использовать его в качестве атрибута src. Для этого вам нужно будет указать правильный путь к файлу изображения.

Например, если файл изображения находится по адресу src/assets/empty-cart.png, вы можете обновить свой код, чтобы он выглядел следующим образом:

import React from 'react';
import { Link } from 'react-router-dom';

const CartEmpty: React.FC = () => {
   return(
     <>
       <div className='cart cart--empty'>
         <h2>Cart is empty :(</h2>
         <p>
           Most likely, you haven't ordered pizza yet.<br />
           in order to order pizza, go to the main page.
         </p>
         <img src='/src/assets/empty-cart.png' />
         <Link to='/'className='button button--black'>
           <span>Go Back</span>
         </Link>
       </div>
     </>
   );
}

export default CartEmpty;

Это должно исправить ошибку типа и позволить вам использовать изображение в качестве атрибута src элемента img.

Comments

[Aetae]

Лол, мистер нейросеть как всегда технически прав.