اذهب إلى المحتوى
  • 0

خطأ عند استخدام المكون Image في nextjs

عبد النور محمد

السؤال

واجهت هذا الخطأ

 Invalid src prop

لكنني اتبعت هذا المرجع Invalid src prop في Next.js ولكن تم عرض الخطأ نفسه

import Image from 'next/image';
import React, { Component } from 'react';  
import logo from '../../public/logo.png';
// import dynamic from "next/dynamic";
// import { Grid} from "semantic-ui-react"; 
function TopBannerApi(props) {
  return (
    <>
  <h1>Footer</h1>
      <p>
         {props.topbannerresult.map((post) =>(
           <>
            <Image src={post.image} alt="test"/>
              {/* <p>{post.store_name}</p> */}
            </>
          ))}
      </p>
    </>
  )
}
export default TopBannerApi;
module.exports = {
  reactStrictMode: true, 
  images: {
    domains: ['dl8mjowvdz1rh.cloudfront.net'],
  }

}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

يجب التأكد من مسار الصورة الصحيح، حيث يجب أن تكون صورة محلية local ضمن مشروع next.js أو صورة عامة global ولكن يجب أن يتم إضافة النطاق domain الخاص بالصورة في ملف next.config.js على النحو التالي:

module.exports = {
  reactStrictMode: true, 
  images: {
    domains: ['image-domain-here.com'],
  }

}

يجب أن يتم إضافة النطاق بدون بروتوكول HTTP أو HTTPS.

ملاحظة: عند عمل أي تعديل على ملف next.config.js يجب أن يتم إعادة تشغيل الخادم مرة أخرى، وتتم هذه العملية تلقائيًا في النسخ الحديثة من Next.js. وإن لم تعمل معك، فيجب أن تقوم بذلك يدويًا.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...