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

السؤال

نشر

أقوم بإنشاء تطبيق تفاعل صغير ولا يتم تحميل صوري المحلية. 

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div className="nav-container">
              
                        <img src={"/images/logo.png"} />
                   
            </div>
        );
    }
}

export default App;

ولكن عند وضع رابط لصورة من الويب تعمل بشكل طبيعي

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div className="nav-container">
              
                        <img src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.theguardian.com%2Fscience%2F2019%2Fjun%2F17%2Fhow-dogs-capture-your-heart-evolution-puppy-dog-eyes&psig=AOvVaw301sOAJ03NKCdAzUH9jaRM&ust=1616372266433000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCLi7yZyOwO8CFQAAAAAdAAAAABAD" />
                   
            </div>
        );
    }
}

export default App;

ما المشكلة ?

Recommended Posts

  • 0
نشر

يوجد أكثر من طريقة لاستيراد لتضمين الصور المحلية في react احداها، و هي تعمل دائمًا:

استراد الصور في بداية المكون كما يلي:

import logo from "./images/logo.png";

و من ثمّ استخدامها في المكون كما يلي:

<img src={logo} />

ليصبح كود المكون كما يلي:

import React, { Component } from 'react';
import logo from "./images/logo.png";

class App extends Component {
    render() {
        return (
            <div className="nav-container">
              
                        <img src={logo} />
                   
            </div>
        );
    }
}

export default App;

 

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...