fix: 🐛 修复 Banner 背景图不显示的bug

limaofeng · Sep 5, 2021 · 31dc057 · 31dc057
1 parent 57f9ba7
commit 31dc057
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 35 deletions.
diff --git a/src/components/Blog/OurRecentNews.tsx b/src/components/Blog/OurRecentNews.tsx
@@ -61,14 +61,17 @@ function OurRecentNews(props: OurRecentNewsProps) {
               <div key={item.id} className="single-blog-item">
                 <div className="post-image">
                   <Link to="/blog-details">
-                    <img src="/images/blog-image/blog1.jpg" alt="image" />
+                    <img
+                      src={`${__webpack_public_path__}images/blog-image/blog1.jpg`}
+                      alt={item.title}
+                    />
                   </Link>
                 </div>
 
                 <div className="post-content">
                   <ul className="post-meta">
                     <li>
-                      By <a href="#">{item.author}</a>
+                      By <a href={item.url}>{item.author}</a>
                     </li>
                     <li>{item.releaseDate}</li>
                   </ul>

diff --git a/src/components/DigitalAgencyPortfolio/MainBanner.tsx b/src/components/DigitalAgencyPortfolio/MainBanner.tsx
@@ -18,6 +18,34 @@ const options = {
   ],
 };
 
+const BannerItem = function ({ item }: any) {
+  return (
+    <div
+      className="agency-portfolio-main-banner"
+      style={{
+        backgroundImage: `url(${__webpack_public_path__ + item.background}`,
+      }}
+    >
+      <div className="d-table">
+        <div className="d-table-cell">
+          <div className="container">
+            <div className="portfolio-banner-content">
+              <span className="sub-title">{item.subtitle}</span>
+              <h1>{item.title}</h1>
+              <p>{item.description}</p>
+              {item.getstarted && (
+                <a href={item.getstarted.url} className="btn btn-secondary">
+                  {item.getstarted.title || 'Get Started'}
+                </a>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 const MainBanner = () => {
   const [display, setDisplay] = React.useState(false);
 
@@ -27,8 +55,7 @@ const MainBanner = () => {
 
   const banners = [
     {
-      background:
-        '/images/agency-portfolio-main-banner/ap-main-banner-img1.jpg',
+      background: 'images/agency-portfolio-main-banner/ap-main-banner-img1.jpg',
       title: 'Digital Agency',
       subtitle: 'We are Creative',
       description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit,
@@ -39,8 +66,7 @@ const MainBanner = () => {
       },
     },
     {
-      background:
-        '/images/agency-portfolio-main-banner/ap-main-banner-img1.jpg',
+      background: 'images/agency-portfolio-main-banner/ap-main-banner-img1.jpg',
       title: 'UX/UI Design',
       subtitle: 'We are Digital',
       description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit,
@@ -51,8 +77,7 @@ const MainBanner = () => {
       },
     },
     {
-      background:
-        '/images/agency-portfolio-main-banner/ap-main-banner-img1.jpg',
+      background: 'images/agency-portfolio-main-banner/ap-main-banner-img1.jpg',
       title: 'Digital Marketing',
       subtitle: 'We are Agency',
       description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit,
@@ -72,32 +97,7 @@ const MainBanner = () => {
           {...options}
         >
           {banners.map((item) => (
-            <div
-              className="agency-portfolio-main-banner"
-              style={{
-                backgroundImage: __webpack_public_path__ + item.background,
-              }}
-            >
-              <div className="d-table">
-                <div className="d-table-cell">
-                  <div className="container">
-                    <div className="portfolio-banner-content">
-                      <span className="sub-title">{item.subtitle}</span>
-                      <h1>{item.title}</h1>
-                      <p>{item.description}</p>
-                      {item.getstarted && (
-                        <a
-                          href={item.getstarted.url}
-                          className="btn btn-secondary"
-                        >
-                          {item.getstarted.title || 'Get Started'}
-                        </a>
-                      )}
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
+            <BannerItem item={item} />
           ))}
         </OwlCarousel>
       )}

diff --git a/src/components/_App/Navbar.tsx b/src/components/_App/Navbar.tsx
@@ -92,7 +92,7 @@ const Navbar = (props: NavbarProps) => {
               className="navbar-brand"
             >
               <img
-                src={`${__webpack_public_path__}/images/logo.png`}
+                src={`${__webpack_public_path__}images/logo.png`}
                 alt="logo"
               />
             </Link>

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -19,6 +19,7 @@ export type BlogData = {
   summary: string;
   author: string;
   releaseDate: string;
+  url?: string;
 };
 
 export type TeamMemberData = {