React/Node app fails to recognize new local image file
I'm trying to add a png image as an tag link that navigates to a facebook page. I have the png stored locally, but it kicks back the following error:
Proxy error: Could not proxy request /Media/Images/fb.png from localhost:3000 to http://localhost:3400/.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).
The link syntax is as follows:
<a href='https://www.facebook.com/foo-bar/' className='facebook'><img src='./Media/Images/fb.png' alt="facebook"/></a>
I looked for a typo but couldn't find any, I also tried giving the tag a closing tag rather than keeping it as self-closing, but that did nothing. Lastly I tried 'requiring' the image as follows:
<a href='https://www.facebook.com/foo-bar/' className='facebook'><img src={require('./Media/Images/fb.png')}></img></a>
When I required the image I got the following error:
Module not found: Can't resolve './Media/Images/fb.png' in 'C:UsersAdministratordocumentsdocumentsnewer-cmpfoo-barsrc'
My suspicion is that the 'require' syntax is correct, but for some reason it cannot see the png file. I have no idea why it wouldn't be able to see it, as it has no trouble accessing the other images. Any direction would be appreciated. Thank you.
html node.js reactjs create-react-app
edited Nov 15 '18 at 4:20
WizKid
4,54221621
asked Nov 14 '18 at 23:12
AaronAaron
43
add a comment |
I'm trying to add a png image as an tag link that navigates to a facebook page. I have the png stored locally, but it kicks back the following error:
Proxy error: Could not proxy request /Media/Images/fb.png from localhost:3000 to http://localhost:3400/.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).
The link syntax is as follows:
<a href='https://www.facebook.com/foo-bar/' className='facebook'><img src='./Media/Images/fb.png' alt="facebook"/></a>
I looked for a typo but couldn't find any, I also tried giving the tag a closing tag rather than keeping it as self-closing, but that did nothing. Lastly I tried 'requiring' the image as follows:
<a href='https://www.facebook.com/foo-bar/' className='facebook'><img src={require('./Media/Images/fb.png')}></img></a>
When I required the image I got the following error:
Module not found: Can't resolve './Media/Images/fb.png' in 'C:UsersAdministratordocumentsdocumentsnewer-cmpfoo-barsrc'
My suspicion is that the 'require' syntax is correct, but for some reason it cannot see the png file. I have no idea why it wouldn't be able to see it, as it has no trouble accessing the other images. Any direction would be appreciated. Thank you.
html node.js reactjs create-react-app
edited Nov 15 '18 at 4:20
WizKid
4,54221621
asked Nov 14 '18 at 23:12
AaronAaron
43
add a comment |
I'm trying to add a png image as an tag link that navigates to a facebook page. I have the png stored locally, but it kicks back the following error:
Proxy error: Could not proxy request /Media/Images/fb.png from localhost:3000 to http://localhost:3400/.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).
The link syntax is as follows:
<a href='https://www.facebook.com/foo-bar/' className='facebook'><img src='./Media/Images/fb.png' alt="facebook"/></a>
I looked for a typo but couldn't find any, I also tried giving the tag a closing tag rather than keeping it as self-closing, but that did nothing. Lastly I tried 'requiring' the image as follows:
<a href='https://www.facebook.com/foo-bar/' className='facebook'><img src={require('./Media/Images/fb.png')}></img></a>
When I required the image I got the following error:
Module not found: Can't resolve './Media/Images/fb.png' in 'C:UsersAdministratordocumentsdocumentsnewer-cmpfoo-barsrc'
My suspicion is that the 'require' syntax is correct, but for some reason it cannot see the png file. I have no idea why it wouldn't be able to see it, as it has no trouble accessing the other images. Any direction would be appreciated. Thank you.
html node.js reactjs create-react-app
edited Nov 15 '18 at 4:20
WizKid
4,54221621
asked Nov 14 '18 at 23:12
AaronAaron
43
I'm trying to add a png image as an tag link that navigates to a facebook page. I have the png stored locally, but it kicks back the following error:
Proxy error: Could not proxy request /Media/Images/fb.png from localhost:3000 to http://localhost:3400/.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).
The link syntax is as follows:
<a href='https://www.facebook.com/foo-bar/' className='facebook'><img src='./Media/Images/fb.png' alt="facebook"/></a>
I looked for a typo but couldn't find any, I also tried giving the tag a closing tag rather than keeping it as self-closing, but that did nothing. Lastly I tried 'requiring' the image as follows:
<a href='https://www.facebook.com/foo-bar/' className='facebook'><img src={require('./Media/Images/fb.png')}></img></a>
When I required the image I got the following error:
Module not found: Can't resolve './Media/Images/fb.png' in 'C:UsersAdministratordocumentsdocumentsnewer-cmpfoo-barsrc'
My suspicion is that the 'require' syntax is correct, but for some reason it cannot see the png file. I have no idea why it wouldn't be able to see it, as it has no trouble accessing the other images. Any direction would be appreciated. Thank you.
html node.js reactjs create-react-app
html node.js reactjs create-react-app
edited Nov 15 '18 at 4:20
WizKid
4,54221621
asked Nov 14 '18 at 23:12
AaronAaron
43
edited Nov 15 '18 at 4:20
WizKid
4,54221621
asked Nov 14 '18 at 23:12
AaronAaron
43
edited Nov 15 '18 at 4:20
WizKid
4,54221621
edited Nov 15 '18 at 4:20
WizKid
4,54221621
edited Nov 15 '18 at 4:20
WizKid
4,54221621
4,54221621
asked Nov 14 '18 at 23:12
AaronAaron
43
asked Nov 14 '18 at 23:12
AaronAaron
43
asked Nov 14 '18 at 23:12
AaronAaron
43
43
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You need to make sure that the file matches exactly which would include casing of file and extension. For example if the file on disk is FB.png but you're attempting to access it as fb.png, depending on your server, it will not find a match.
DISCLAIMER - Aaron asked me to look at it and gave me access to his code-base.
The source at the time I saw did not match the question he asked but instead had the following line: <a href='https://www.facebook.com/foo-bar/' className='facebook'><img src={require('./Media/Images/fb-white')}></img></a>. The file in his source was fb-white.png. I corrected his reference to include the file extension and now it works.
answered Nov 15 '18 at 0:56
FooberichuFooberichu
37318
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53310154%2freact-node-app-fails-to-recognize-new-local-image-file%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You need to make sure that the file matches exactly which would include casing of file and extension. For example if the file on disk is FB.png but you're attempting to access it as fb.png, depending on your server, it will not find a match.
DISCLAIMER - Aaron asked me to look at it and gave me access to his code-base.
The source at the time I saw did not match the question he asked but instead had the following line: <a href='https://www.facebook.com/foo-bar/' className='facebook'><img src={require('./Media/Images/fb-white')}></img></a>. The file in his source was fb-white.png. I corrected his reference to include the file extension and now it works.
answered Nov 15 '18 at 0:56
FooberichuFooberichu
37318
add a comment |
You need to make sure that the file matches exactly which would include casing of file and extension. For example if the file on disk is FB.png but you're attempting to access it as fb.png, depending on your server, it will not find a match.
DISCLAIMER - Aaron asked me to look at it and gave me access to his code-base.
The source at the time I saw did not match the question he asked but instead had the following line: <a href='https://www.facebook.com/foo-bar/' className='facebook'><img src={require('./Media/Images/fb-white')}></img></a>. The file in his source was fb-white.png. I corrected his reference to include the file extension and now it works.
answered Nov 15 '18 at 0:56
FooberichuFooberichu
37318
add a comment |
You need to make sure that the file matches exactly which would include casing of file and extension. For example if the file on disk is FB.png but you're attempting to access it as fb.png, depending on your server, it will not find a match.
DISCLAIMER - Aaron asked me to look at it and gave me access to his code-base.
The source at the time I saw did not match the question he asked but instead had the following line: <a href='https://www.facebook.com/foo-bar/' className='facebook'><img src={require('./Media/Images/fb-white')}></img></a>. The file in his source was fb-white.png. I corrected his reference to include the file extension and now it works.
answered Nov 15 '18 at 0:56
FooberichuFooberichu
37318
You need to make sure that the file matches exactly which would include casing of file and extension. For example if the file on disk is FB.png but you're attempting to access it as fb.png, depending on your server, it will not find a match.
DISCLAIMER - Aaron asked me to look at it and gave me access to his code-base.
The source at the time I saw did not match the question he asked but instead had the following line: <a href='https://www.facebook.com/foo-bar/' className='facebook'><img src={require('./Media/Images/fb-white')}></img></a>. The file in his source was fb-white.png. I corrected his reference to include the file extension and now it works.
answered Nov 15 '18 at 0:56
FooberichuFooberichu
37318
answered Nov 15 '18 at 0:56
FooberichuFooberichu
37318
answered Nov 15 '18 at 0:56
FooberichuFooberichu
37318
answered Nov 15 '18 at 0:56
FooberichuFooberichu
37318
37318
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53310154%2freact-node-app-fails-to-recognize-new-local-image-file%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
