JSX File wont load image only in HTML page will it load

Question

First and far most to rule out any file location problems when I use the average code in my HTML page it loads up correctly but when i return it in my react class i get this image which Stack Overflow wont let me post due to lack of 10 what ever points. But its just a blank window image

So this error has nothing to do with a file location problem i can get it to show up only inside of my HTML page not JSX file. The code for my JSX file is as follows

var Quiz = React.createClass({
    render: function () {
        return(
            <div>
                <img src="~/Images/SHADOW LOGO.png" />
            </div>
        )
        React.render(<Quiz/>, document.getElementById('container'));
    }
}

Also yes i did make sure the id in my HTML id does =container Any answer as to why it shows only if i put through the HTML page and not the react JSX file. Also my quiz class is returning other elements and components just fine some text boxes and buttons its only the images im having problems with.

Are you sure `SHADOW LOGO.png` is a valid fliename to access? Try it without the space. — heartyporridge, Aug 13 '15 at 21:25
possible duplicate of [React img tag issue with url and class](http://stackoverflow.com/questions/26054512/react-img-tag-issue-with-url-and-class) — Ben, Aug 13 '15 at 22:51

score 0 · Answer 1 · answered Aug 13 '15 at 21:27

0

Don't forget the curly braces :) JSX syntax

<img src={"your/image/path"} />

A good read http://facebook.github.io/react/docs/jsx-in-depth.html#attribute-expressions

answered Aug 13 '15 at 21:27

François Richard

6,817
10
43
78

JSX File wont load image only in HTML page will it load

1 Answers1