0

So I copied a code in react to native javascript. I have a folder named imgs this folder contains all the images and an index.js file that looks like this.

export { default as img1 } from "./one.jpg";
export { default as img2 } from "./two.jpg";
export { default as img3 } from "./three.jpg";
export { default as img4 } from "./four.jpg";
export { default as img5 } from "./five.jpg";

Now I tried to import these images to another file like this

import { img1, img2, img3, img4, img5 } from "./imgs";

and I get an error in my console enter image description here

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

this works like a charm when I used it in CRA but it doesn't work here. What am I missing

Melly
  • 675
  • 8
  • 24
  • In React when importing an image webpack, or which bundler you are using, resolves the imported image to it's file path. So `` becomes ``, that results in the image being loaded by the browser as normal. – Palladium02 Jul 12 '22 at 10:17
  • You cannot import images into a plain js file as describe above. So my question is, how do you want to use the images in the plain js project? Based on that one could give a fitting answer. – Palladium02 Jul 12 '22 at 10:41
  • The file that I'm importing the image to was supposed to mimic an API response. I'm aware that react imports local images as URL and that's exactly what I needed. that URL will later be filled in `img`'s `src` parameter dynamically. So this is actually not needed if I have an actual API but I need it to mimic an API response with local images – Melly Jul 12 '22 at 12:15
  • In that case you could then store the file URLs as strings in another js file and then reference that js file to have access to the URLs. – Palladium02 Jul 12 '22 at 12:21
  • Does this answer your question? [How to load image files with webpack file-loader](https://stackoverflow.com/questions/37671342/how-to-load-image-files-with-webpack-file-loader) – Konrad Jul 12 '22 at 21:40

1 Answers1

0

In my projects, I create a file and put all the image calls in it

const image1=requre("../location image ")

export {
image1
}

And in the file where I want to use the pictures

import {image1} from  "../images file"

<Image source={image1} />
omar abu alhija
  • 41
  • 4