How to add Images?

Help Requests
1

I don’t know how it is that I’m missing this, but I can’t find any docs on how to add an image?

Using an app created with the CLI, I have a /static folder and /resources folder. I put the image at /static/images/image.svg and in a template I have <img src="/static/images/image.svg" but this doesn’t work when running npm run start.
I searched for “images” on many of the Tutorials pages but I can’t find any mention of them.
Any pointers would be much appreciated,
Thanks!

1 Like
3

I have the static dir at the top level with static/images/logo.png. Just committed this at https://github.com/will-moore/omero-idr-ui/commit/6af0a91dce312526cda3544dd8139ee1ba8e44ee
When I do au run I see that file in the terminal output like:

                                     Asset      Size            Chunks                    Chunk Names
app~d0ae3f07.03d510c4bae86674b870.chunk.js   105 KiB      app~d0ae3f07  [emitted]         app~d0ae3f07
                           images/logo.png  6.58 KiB                    [emitted]

But the resulting app doesn’t load the png in the browser. Do I need manually deploy/copy files somewhere or to configure webpack to do this for me? I kinda assumed that the au CLI would do this for me?
Many thanks.

1 Like
4

Sorry, my bad. I totally forgot webpack because I don’t use it!

For webpack, every files in static/ folder are actually ended as top level in dist/ folder.

So you do <img src="/images/loglo.png">. The webpack dev server serves static files directly without /static/ prefix.

After you run au build --env prod, look into dist/ folder, you will see all the files to be deployed to your production site, including a index.html file and your images/logo.png.

1 Like
5

Yes, thanks. That fixed it. :grinning:

1 Like