Prompt Title: GatsbyJS Image Swap.

Created 1 year ago
Votes 0
Views 271 times
0
Human: Есть задача, нужно подменить изображение на странице, название изображения передается get параметром в url - http://my-site/?bn=gagarina по этому get параметру надо подменить изображение на баннере и надо сделать без мерцания при помощи GatsbyJS
ChatGPT:

Для подмены изображения на странице в GatsbyJS можно использовать компонент StaticImage.

  1. Сначала нужно получить значение параметра bn из URL. Для этого можно использовать useLocation из react-router-dom. Пример:
jsx
import { useLocation } from "react-router-dom" function MyComponent() { const location = useLocation() const bn = new URLSearchParams(location.search).get("bn") return ( // ... ) }
  1. Затем, используя полученное значение bn, можно подставить нужное изображение в компонент StaticImage. Пример:
jsx
import { StaticImage } from "gatsby-plugin-image" function MyComponent() { const location = useLocation() const bn = new URLSearchParams(location.search).get("bn") let imageSrc if (bn === "gagarina") { imageSrc = "/images/gagarina-banner.jpg" } else if (bn === "another-banner") { imageSrc = "/images/another-banner.jpg" } else { imageSrc = "/images/default-banner.jpg" } return ( <StaticImage src={imageSrc} alt="Banner" /> ) }
  1. Чтобы изображение не мерцало при загрузке, можно использовать атрибут loading="eager". Пример:
jsx
import { StaticImage } from "gatsby-plugin-image" function MyComponent() { const location = useLocation() const bn = new URLSearchParams(location.search).get("bn") let imageSrc if (bn === "gagarina") { imageSrc = "/images/gagarina-banner.jpg" } else if (bn === "another-banner") { imageSrc = "/images/another-banner.jpg" } else { imageSrc = "/images/default-banner.jpg" } return ( <StaticImage src={imageSrc} alt="Banner" loading="eager" /> ) }

Таким образом, при переходе по URL с параметром bn будет подставлено соответствующее изображение без мерцания.

Human: у меня нету ract-router-dom надо использовать библиотеку из gATSBYjs
ChatGPT:

Если у вас нет react-router-dom, вы можете использовать useLocation из пакета @reach/router, который входит в Gatsby по умолчанию.

Вот пример, как можно использовать useLocation и StaticImage для подмены изображения на странице в Gatsby без react-router-dom:

jsx
import React from "react" import { useLocation } from "@reach/router" import { StaticImage } from "gatsby-plugin-image" const MyComponent = () => { const location = useLocation() const bn = new URLSearchParams(location.search).get("bn") let imageSrc if (bn === "gagarina") { imageSrc = "/images/gagarina-banner.jpg" } else if (bn === "another-banner") { imageSrc = "/images/another-banner.jpg" } else { imageSrc = "/images/default-banner.jpg" } return ( <StaticImage src={imageSrc} alt="Banner" loading="eager" /> ) } export default MyComponent

Здесь мы используем useLocation из @reach/router для получения текущего URL и параметра bn. Затем мы подставляем нужное изображение в компонент StaticImage с помощью условного оператора if/else. Наконец, мы добавляем атрибут loading="eager", чтобы изображение загружалось заранее и не мерцало при загрузке.

Убедитесь, что изображения gagarina-banner.jpg, another-banner.jpg и default-banner.jpg доступны по соответствующим путям в вашем проекте.

avatar
Ilyas Gosling
Shared 1 prompt
Created 1 year ago

Leave a Comment

Related Tag Prompts

72
0
JavaScript Jedi
1 year ago 2023-02-14 06:35:19 AIPRM
0
0
Learning Programming Basics.
1 year ago 2023-03-08 15:06:52 pawan
0
0
first class function
1 year ago 2023-03-08 16:15:57 Dilshod
0
0
props drilling
1 year ago 2023-03-09 03:28:27 anik
0
0
react query
1 year ago 2023-03-09 10:07:32 rakib
0
0
Java GUI quadratic solver
1 year ago 2023-03-10 18:43:18 Xa3ap
0
0
0
0
Javascript to-do list app
1 year ago 2023-03-13 03:18:54 Simon
0
0
javascript滑块
1 year ago 2023-03-21 08:41:21 QingTool
0
0
This in odoo
1 year ago 2023-03-22 18:11:34 nqvinh
0
0
Google Sheets SMS Script
1 year ago 2023-04-03 16:53:35 ben
0
0
webview print problem
1 year ago 2023-04-10 09:28:07 aa
0
0
对象转换的优化
1 year ago 2023-04-18 02:11:47 k
0
0
Описание Node.js
1 year ago 2023-04-19 10:06:01 John Doe