Trouble displaying assets post-build in Vite and React

When I run npm run build, my images located in src/assets/... are not visible in the dist directory or production build. This means they do not appear on the site. However, they work fine in developer mode.

Does anyone have any suggestions on how to ensure these images remain available after the application is built?

In addition, when checking my VSCode terminal, I am receiving an error message stating:

"GET /src/assets/store2.webp" Error (404): "Not found"

<div className="onah">
  <img src="src/assets/Deal-2.webp"

I have included some screenshots to provide better clarity on the issue. I even had to adjust my vite.config settings for this situation:

https://i.sstatic.net/pOSLA.png

https://i.sstatic.net/XAlSm.png

cssreactjsbuildviteassets

Answer №1

To ensure efficient management and proper building for production in Vite, it is recommended that you import the asset instead of:

  <div className="onah">
     <img src="src/assets/Deal-2.webp"

The correct approach would be:

  import deal from "src/assets/Deal-2.webp";

  <div className="onah">
    <img src={deal} ... />

Answer №2

Make sure to import assets located in the src/assets directory into your code to include them in the bundle. Here's how you can do it:

// Importing an image asset into the code
import image1 from './assets/image1.webp';

// Using the imported asset
<img src={image1} alt="Image 1" />

If you only need static files bundled with your project, use the public/ directory and reference them using process.env.PUBLIC_URL

// Assuming the image is stored in a public directory 
<img src={process.env.PUBLIC_URL+"/image1.webp"} alt="Image 1" />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for fading an image as you scroll using CSS and JavaScript?

I have been dedicating my day to mastering the art of website development. However, I am facing a challenge that is proving to be quite difficult. I am looking to create a smooth transition effect where an image gradually blurs while scrolling down, and re ...

javascripthtmljquerycss

Design a Custom Component in React with Generic Capabilities

Here I have a question related to creating a CustomView component in react-native. While the code is written using typescript, the concepts discussed can also be applied to react. In my current implementation, I have defined styles for the CustomView and ...

javascriptreactjstypescriptreact-nativetypes

The Bootstrap tooltip fails to function properly following a page update or refresh

My tooltip component seems to be malfunctioning, and I suspect the issue lies within the option attributes. I am unsure where the problem is occurring and how to resolve it. The tooltip component was initialized using the code below: var options = { anim ...

javascriptreactjsbootstrap-5

Methods for scaling the size of CSS background images

Can anyone assist me with scaling background image size properly? code: http://codepen.io/AnilSimon123/pen/JRBRZa Below is the code snippet: .bgimage{ background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vec ...

htmlcss

Utilizing a StyledComponents theme within a Component

When creating a style called Link, the theme is contained inside of this.props. How can the theme be extracted from props and passed into the Link styled component? Error: ReferenceError - theme is not defined import React from 'react'; impo ...

javascriptcssreactjsstyled-components

Issue encountered when attempting to invoke a reducer function for state modification

It seems like I'm overlooking something when trying to call a reducer function from redux using mapDispatchToProps, but the missing step eludes me. This is the code for the reducer: case "CHANGE_COMPLETED": return (state = { ...sta ...

reactjsreduxreact-reduxmaterial-ui

Encountering challenges while developing a react application with TypeScript

An error has occurred: G:\ReactProj\my-app\node_modules\react-scripts\scripts\utils\verifyTypeScriptSetup.js:239 appTsConfig.compilerOptions[option] = value; ^ TypeError: Cannot assign to read only property 'jsx&apo ...

reactjstypescript

What is the reasoning behind the presence of hidden elements on the Google Search Result Page?

While using the debugging feature, I stumbled upon some hidden elements on the page. Can anyone shed some light on why these elements are present with a display attribute of none? The first one on the left is an iframe, followed by multiple text areas. ...

htmlcss

Invoking React Native Functions

I am just starting out with React Native and I have a question in mind. Is it possible to call a function that is defined inside the useEffect hook from outside the hook? I want this function to be executed every time the page is refreshed. Currently, my ...

reactjsreact-native

What is the best way to incorporate my Switch component into my Table component as a distinct column, while also maintaining separate states for each component?

My journey into learning React.js has been exciting so far. However, I am facing some confusion when it comes to stateful components. Currently, I am utilizing Bootstrap tables for creating a table and successfully fetching data using GET requests. Additio ...

javascriptreactjsreduxbootstrap-4material-ui

The child divs are not adjusting to the height of the parent container

My goal is to have the height of the children div .cell fill up 100% of the parent's height, but it doesn't seem to be working. This is the HTML code: <div class="header"> header </div> <div class="wrapper"> <di ...

htmlcssheight

Choose an element for styling only if it contains a child element with a particular class

Looking to adjust padding based on specific child class <div class="container page-content"> </div> The page-content class typically includes padding: .container.page-content{ padding-top: 160px; } However, there is a special case wher ...

htmlcsscss-selectors

Any tips on how to effectively integrate dynamic theming in CSS?

I am currently developing a theming feature for my web application, allowing users to select a theme that will dynamically change the color of various elements. Here is an example of the theme selector: <div id="theme-selector"> <div id="theme- ...

javascriptcssarraysthemes

Excessive width of the lower border

I have a dropdown menu on my website and I wanted to add a border-bottom to the menu. However, the border appears too wide. I went through every step of this solution as it seemed like the same problem, but nothing seems to be working. It would be great i ...

htmlcss

Vuetify's data table now displays the previous and next page buttons on the left side if the items-per-page option is hidden

I need help hiding the items-per-page choices in a table without affecting the next/previous functionality. To achieve this, I've set the following props: :footer-props="{ 'items-per-page-options':[10], &apo ...

javascripthtmlcssvue.jsvuetify.js

How can I show a floating button on top of a webview in an android app

Having trouble displaying a floating button over a webview on Android. It works fine on iOS, but doesn't show up on Android. Here is the render function: <View style={{ flex: 1}}> <View style={{position:'absolute' ...

androidreactjsreact-nativeandroid-webview

How can I alter the background color while performing a transformation in JS/CSS?

I'm currently working on achieving a flipboard effect for some divs, where one side is white and the other is black. Here's what I have so far: setInterval(function () { document.getElementById('test').classList.toggle('flipped& ...

javascripthtmlcss

Setting the height of a div tag in CSS/HTML5 to match the current height of the browser window

Is there a way to make the height of my div tag always equal to the height of the browser's window, so it adjusts automatically when the browser is resized? I have tried using .class { height: 100%; } But this doesn't work. I've learne ...

javascriptjqueryhtmlcssresponsive

Guide on updating the Node.js version on a Windows operating system

It seems that Firebase CLI v11.0.0 is not compatible with Node.js v12.21.0. An upgrade to Node.js version >= 14.18.0 is required. Despite trying all possible solutions, such as reinstalling and running npm i [email protected], I still couldn' ...

node.jsreactjsnode-modules

Tips for effectively extending a styled component with TypeScript

The latest version of styled-components, v4, has deprecated the use of .extend for extending or composing components. The recommended way to do this is shown below: const ButtonA = styled('button')`color: ${props => props.color};` const Butto ...

reactjstypescriptstyled-components