Importing Images Inside of a react component

help
1

here is my image import

import studio1 from '/studio-1.jpg';

and here is what the component looks like.

 <img  alt="..." src={studio1}className={navImageClasses} />

Console Error: Cannot find module ‘/studio-1.jpg’

2

I think you need to clarify your question, but if your image is public, maybe you should just put it in a public folder and then call it with src="/studio-1.png"

As mentioned in this section of the docs : https://guide.meteor.com/structure.html#special-directories

public

All files inside a top-level directory called public/ are served as-is to the client. When referencing these assets, do not include public/ in the URL, write the URL as if they were all in the top level. For example, reference public/bg.png as <img src='/bg.png' />. This is the best place for favicon.ico, robots.txt, and similar files.

3

My apologies that I didn’t clarify in my question. I’m following an example for the component I’m creating. The example is a none meteor example but simply a react example. The way that they use images inside of the component is by importing them and passing them as a prop to the the image elements in the component. I put some dummy images inside of my public directory and when I run my project I get these errors. I’m not sure as to why this is happening unless maybe import images is not supported.

I have tried both

import studio1 from '/studio-1.jpg';

and also

import studio1 from '/public/images/studio-1.jpg';

And the error persists.

4

What framework are you using to serve your media ? is it a Create-react-app ? Anyway, I think your question could fit better on Stack Overflow.

5

My project is a Meteor project

6

I think the example you are working from may be using webpack with either the file-loader or url-loader. Meteor doesn’t have these.

7

Nope It doesn’t use webpack. It’s a material-ui theme

8

If it’s a meteor project and the file is public, just serve it in the public folder. I personnaly have never seen importing images (do not say it doesn’t existing, just never dealt with it). Maybe post a link to the example so that we could see more clearly

10

@taylorg, @ivo is right you just place your image in public folder, then use as <img src='studio-1.jpg' /> The point is you don’t need to import your image. It will automatically imported by the meteor.