Изображение svg не отображается на react.js
Я следил за учебником YouTube по созданию веб-сайта с использованием react.js.
index.js:
import { Img, ImgWrap } from './InfoElements';
const InfoSection = ({ img, alt)} => {
return(
<>
<ImgWrap>
<Img src = {img} alt = {alt}/>
</ImgWrap>
</>
)
}
export default InfoSection
Я экспортировал изображение src из другой папки с именем Data.js.
Данные.js:
export const homeObjOne = {
img: require("../../images/svg-1.svg"),
alt: 'error404'
}
Я использовал styled-components для стиля
InfoElements.js:
export const ImgWrap = styled.div`
max-width: 555px;
height: 100%;
`;
export const Img = styled.img`
width: 100%;
margin: 0 0 10px 0;
padding-right: 0;
`;
Здесь изображение размещено на
источник-> изображения-> svg-1.svg
Я пытался использовать другие изображения, такие как jpe, jpg и png, а не svg, но все равно это не работает. Изображение не отображается на фоне.
Вот изображение, как изображение возвращается:
Вот путь к папке с изображением:
Я пробовал все другие форматы изображений, и результат такой же. Я сделал что-то не так?
Ответы 2
Ваша структура становится жертвой проблемы с именами экспорта по умолчанию. Когда вам требуется изображение в Data.js, вы устанавливаете его как модуль. Если вы хотите получить доступ к URL-адресу изображения, вам нужно использовать:
export const homeObjOne = {
img: require("../../images/svg-1.svg").default, //note the default part at the end
alt: 'error404'
}
Хотя это можно было бы сделать чище, используя импорт:
import homeObjOne from "../../images/svg-1.svg";
export const homeObjOne = {
img: homeObjOne, //no need for default here, thanks to import
alt: 'error404'
}
Примечание. Если вы проверите свое изображение, пока оно повреждено, вы увидите, что src будет [object Object].
Следите за этой статьей https://www.freecodecamp.org/news/unable-to-find-images-based-on-url-in-react/.
Переместите папку с изображениями под /public, а не /src.
В data.js
img: "./images/svg-1.svg"
Или используйте вы можете использовать import, вот так import image1 from "./images/1.jpg
При добавлении по умолчанию это сработало. Второй метод также полезен, но я не хочу его использовать. Потому что мне нужно использовать еще несколько изображений. Спасибо за решение этой проблемы.