3

I want to add an image tag like so

img [ Src "/AirPassengerData.png" ]

but the image does not load when I view the generated website.

I am using the dotnet core project template fable-elmish-react

and although I have found this Fable.Helpers.React.img helper, the image does not wind up in my the /public folder which I understand is the webpack output folder.

I have followed the instructions here to try to get webpack to move the image from an /assets folder that I have created, into the /public folder, but those instructions direct that I add a require statement to require the loading of the image, but I cannot find any examples of how to do this using Fable.

glennsl
  • 28,186
  • 12
  • 57
  • 75
user7817808
  • 111
  • 2
  • 8
  • 2
    I'm pretty sure that should be `img`, not `i`. `i` makes an `` element, which stands for italics. For images, you want an `` element, which means you'd write `img` in your Fable code. – rmunn Apr 04 '18 at 01:32
  • 2
    Also, the [`img` helper](https://github.com/fable-compiler/fable-react/blob/0de90f9f62d877d1ea9c78fe5ee4d6d75e6ef132/src/Fable.React/Fable.Helpers.React.fs#L1059) takes just one parameter, not two. Since HTML `` tags can't have children, when you change that `i` to an `img` the way it should have been, you should remove the `[]` at the end as well since it's not needed. – rmunn Apr 04 '18 at 01:35
  • You are definitely correct. `img [ Src "AirPassengerData.png" ]` results in an tag being rendered. I still can't figure how to get the image into the /public aka webpack output folder, so I'll let my question stand, but I appreciate this help. – user7817808 Apr 04 '18 at 02:36
  • I've updated the question, just to make apparent the portion of the question which I still lack. – user7817808 Apr 04 '18 at 17:49

1 Answers1

5

In response to your last comment about webpack and images:

On my fable projects, what I do is that I make webpack output the JS bundle to a existing folder ("scripts") inside an existing "public" folder because I want webpack to only care about bundling JS stuff.

Static assets like images are not moved by webpack but I manually move them to the public folder. Because those assets do not usually change too often, it is fine to move them there manually.

Your requirements may vary from mine, and you may still want to pursue trying to get webpack to do the images, but I would recommend that if the images do not change too often, you might as well save some time and just do it manually.

Juan Tarquino
  • 967
  • 7
  • 13