Fork me on GitHub

Hi, how would you reference local images (png) in Reagent? What's the equivalent of import RandomImage from "../images/random_image.png"; ?


I tried using the (rc/inline "../images/random_images.png") from referenced in a previous post about SVGs but that doesn't seem to work


What do you expect RandomImage to contain? A data URL? A regular URL where the PNG is copied into the output directory? Something else?


I'm pretty sure it'd be a string? Not too certain about React default behaviour when it comes to importing images


From > You can `import` a file right in a JavaScript module. This tells webpack to include that file in the bundle. Unlike CSS imports, importing a file gives you a string value. This value is the final path you can reference in your code, e.g. as the `src` attribute of an image or the `href` of a link to a PDF. > To reduce the number of requests to the server, importing images that are less than 10,000 bytes returns a instead of a path.


For now I just stored the images in public/images and referenced them like [:img {:src "images/random_image.png"}] which seems clean enough, but wondering if there's a more idiomatic way to do it similar to how React does it


That import has nothing to do with React itself - it's the compiler/bundler included with that template that does it. Your solution is exactly how I'd do it - obvious, simple, flexible.