0

The image object is not working.

I have tried importing the image and putting it in with JSX and also using the relative path.

const TeacherList = [ { name: "PowerPumpsandMoves",

img_src: "../PPMfinalmockup.png",
id: "teach-4",
live: "",
used: "JavaScript,Html5,BootStrap-4"

}

I would like this image to show up.

  • More information about your development environment would help. Eg are you using Create React App? custom webkit? Or just vanilla js es5? – SStanley May 25 '19 at 03:00
  • Hey Sorry i am using Create React APP –  May 25 '19 at 03:05
  • Ah that makes sense. Then either use `import imgPath as '../relativeUrl';` for each one or try one of the other suggestions in my answer. – SStanley May 25 '19 at 03:19

1 Answers1

0

Hi there assuming you are using Create React App or a similar tool, you have to explicitly import all resources at app startup. Meaning they sadly can't just exist as paths in your array.

Resolving specific relative path problems will depend on your development environment and the settings of whichever development server you use like webpack-dev-server.

If your array of images is coming from an API or some other dynamic data source, a better practice may be to host your images on a CDN and use absolute URL's in your data. AWS buckets and Cloudinary are great services to try for this.

However to quickly import a large amount of photos from a single directory if you are using webpack, you can check out this answer.

Dynamically import images from a directory using webpack

SStanley
  • 730
  • 8
  • 8
  • Yes ive tried google photos but the images do not show up on iphone and mobile for some reason is cloudinary and AWS different? –  May 25 '19 at 13:08
  • cloudinary has a free tier and does image hosting for you but also makes it easy to handle user-uploaded photos. AWS S3 is more generic file storage so would suit things like lots of pdfs better. Google photos isn't really meant for providing links to the images on other apps and services I believe. There is also imgur as well for image hosting. – SStanley May 27 '19 at 05:47