Question

my function header is trying to call a image that i have on my machine? Do I have any error in this code? how can I know if it's right. if it's wrong provide example with code please

acubed - Microsoft Visual Studio Tools Edat View Team Window Help - Select Startup item... - Pa 11. App.test.js index.js App.js = X 1 import React, { Component } from 'react'; 2 import ( Browser Router as Router, Route ) from "react-router-dom" 3 import './styles/App.css'; 4 import "bootstrap/dist/css/bootstrap.min.css" 5 6 import Navbar from "./components/navbar.component" 7 import ExercisesList from "./components/exercises-list.component"; B import EditExercise from "./components/edit-exercise.component"; 9 import CreateExercise from "./components/create-exercise.component", import Createlser from "./components/create-user.component"; 11 12 import logo from './A-cubed.png'; // Tell webpack this us file uses this image 13 14 a function App() { 15 return 16 <Router Navbar) 13 <br/> 19 <Route path="/" exact component (Exercisesuist) /> 23 <Route path/edit/id" component(EditExercise) /> <Route path="/create" component (CreateExercise) /> <Route path="/user" component (Createuser} /> 25 </lavbar </Router 27 28 30 function Header() 31 return <img src={C:\Users\unknown\Desktop\dit acubed public images A-cubed.png) alt Acubed/ ) 200 O Ready Cole INS

Answer 1

YES, THERE WILL BE ERROR WHILE COMPILING DUE TO FOLLOWING REASON:-

1) URL IN THE SOURCE SHOULD BE IN DOUBLE QUOTES

2) USE MUST USE ' / ' INSTEAD OF ' \ '

i.e

your code is

function Header() { return <img src={"C:\Users\unknown\Desktop\Git\acubed\public\images\A-cubed.png"} alt="a-cubed"/> w

It should be,

function Header() { return <img src={"C:/Users/unknown/Desktop/Git/acubed/public/images/A-cubed.png"} alt="a-cubed"/> }

3) NOT ALLOWED TO LOAD LOCAL RESOURCES

EVENTHOUGH IF YOU RUN THIS CODE YOU MAY SEE NO ERROR WHILE RUNNING THE REACT APP BUT YOU CANNOT SEE THE IMAGE. SINCE REACT APP RUN AS A SERVER AND DOES NOT HAVE ANY ACCESS TO YOUR C: DRIVE, THE BROWSER'S ERROR LOG RETURN ERROR STATING "Not allowed to load local resources". THIS ERROR WON'T AFFECT ANY FUNCTIONALITY OF PROGRAM BUT IT DOES NOT HAVE ACCESS TO VIEW. THE FUNCTION WILL RETURN IMAGE TAG AND SHOWS THE ALT TEXT "A-cubed" INDICATING THE IMAGE IS NOT REACHABLE.

IN ORDER TO SEE THE IMAGE, CREATE A IMAGE FOLDER IN YOUR REACT APP AND PLACE THE IMAGE IN THAT FOLDER AND SPECIFY THE URL IN THE IMAGE TAG SOURCE.