Question 255944 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Vite React App – Won't load img with external url

I tried using the Vite development server to run a React app.

When I try to load an image with an external URL, such as:
<img src="https://i.imgur.com/73hZDYK.png" />

Inside a .jsx element, the image fails to load.

I notice looking at the Network tab in the DevTools, I get 403 Forbidden.

I am not sure why?

The exact same component in a create-react-app will display the image no problems.

Any ideas?

Thank you

EDIT: Figuring out its CORS… but don’t understand why or how to get through it?

EDIT 2: Adding vite.config.json (I didn’t add anything)

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
});

EDIT3: adding component:

<header class="tweet--header">
  <img class="tweet--avatar" src="https://i.imgur.com/73hZDYK.png" />
  <h2 class="tweet--name">Newton</h2>
  <small class="tweet--handle">@SirIsaac</small>
</header>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So actually, I found a way to make it work.

    after running npm run dev, the shell suggest an address for the Local, to visit the project, with an IP:port such as HTTP://127...

    If I replace the IP with localhost:<port>, the images will load.

    Hmmhmm


  2. 0

    If it’s happening with just Vite as you mentioned, your vite.config.js is most likely missing a configuration, as I just tested the image and it works.

    Otherwise, it’s most likely a Mixed Content error.

    Browsers typically have strict policies that deny loading resources between HTTP and HTTPS. So, it’s most likely because you are on localhost (aka HTTP) and you want to load from https://i.imgur.com (aka HTTPS).

    It can also be the CORS policies on the server hosting your image i.e., https://i.imgur.com denies access to its resources from HTTP.

    Solutions:

    • Use HTTP for both of them i.e. download your image to your computer to use it during development.

    • Check the CORS policies for the image server. It may not allow access from HTTP, so you should download the file.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search