What could be the reason for my dynamic image not appearing in a child component when using server-side rendering in Nuxt and Quasar

Currently, I am tackling SSR projects using Nuxt and Quasar. However, I encountered an issue when trying to display a dynamic image in a child component as the image is not being shown.

The snippet of my code in question is as follows:

function getUrl (img: string)  {
  return require(`@/assets/imgs/sidebar/${img}.png`);
}

An error message pops up stating:

Cannot find module '@/assets/imgs/sidebar/side_1.png.png' Require stack: - E:\Work\0503_game777\nuxt-quasar\components\sidebar\SideBarItem.vue

I have double-checked the image path, and it seems correct since the image displays when accessed directly.

I also attempted the following fix:

function getUrl (img: string)  {
  return `/_nuxt/assets/imgs/sidebar/${img}`;
}

This approach works fine locally; however, post-build, the image fails to load. Additionally, I tried importing the dynamic image path instead of using require(), resulting in a promise error. My current implementation is in TypeScript.

typescriptvue.jsserver-side-renderingquasar-frameworknuxt3.js

Answer №1

The issue has been resolved by relocating the image to the public directory. Appreciate your assistance.

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

How can we transform the `toUSD(amount)` function into a prototype function?

This function is functioning perfectly as intended. function toUSD(amount): string { // CONVERT number to $0.00 format return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(amount); }; Here is how I currently i ...

typescriptdeno

Warning: Potential spacing issues when dynamically adjusting Material UI Grid using Typescript

When working with Typescript, I encountered an error related to spacing values: TS2322: Type 'number' is not assignable to type 'boolean | 7 | 2 | 10 | 1 | 3 | 4 | 5 | 6 | 8 | "auto" | 9 | 11 | 12'. No lint errors found Version: typesc ...

typescriptmaterial-ui

Can you use getters and setters in a TypeScript declaration file?

I am facing an issue with a declaration file for the openUi framework. The framework utilizes a get<propname>() and set<propname>(var) syntax for its properties. In traditional JavaScript, the setup would look like this: sap.ui.getCore().atta ...

typescriptdeclaration

Discover the steps to showcasing product images within Shopware 6's user-friendly administration interface

Working on a specialized Shopware 6 Administrative plugin, integrating product images has proven to be quite challenging. After thorough investigation of the Shopware repositories such as 'product_media' and 'media', along with other re ...

vue.jsvue-componentshopwareshopware6

Leveraging Vue Prototypes for Tailored Event Functionality

My current implementation looks something like this: // Emit event: <btn @click="$emit('saveJsonFile') /> // Catch event: <Component @saveJsonFile="doSomething" /> However, I want to avoid using magic strings for even ...

vue.jsvue-component

Passing data from a container component to a Redux Form component in React with TypeScript

One of my Form container components looks like this: class PersonalDetailContainer extends React.Component<PropTypes> { onSubmit = async (fields: PersonalFields) => { this.props.savePersonalDetail(fields); }; render(): JSX.Element { ...

reactjstypescriptredux-formreact-props

Changing the name of a tab within a p-tabview

Setting up a p-tabview with tabs containing specific content involves the following code: <p-tabView class="tabmain" > <ng-container *ngFor="let tab of tabs"> <p-tabPanel [header]="tab.header" > ...

cssangulartypescriptprimengprimeng-turbotable

The issue of V-select's lack of compatibility with big integers is causing scalability problems

When a select list contains items with extremely large integers like 738883988997898200, clicking on it causes the options to hang on the screen, preventing further action. This issue arises because we are working within a v-form that is validating the fi ...

vue.jsvuetify.jstypeerrorbigintv-select

Error: The concept of the window is not recognized in Vite Vitesse

I'm encountering an issue during the application building process. Everything seems to run smoothly in development mode, but once I build it, I keep getting an error that says window is not defined. https://i.sstatic.net/NuqKW.png export function soc ...

vue.jsvuejs3vite

Examining for a TypeError with Typescript and Jasmine

In my current project, I am faced with the challenge of writing unit tests in Typescript for an existing library that was originally written in plain JS. Most of our page logic is also written in plain JS. Some functions in this library throw exceptions if ...

typescriptjasmine

I am curious about the Vue component architecture and have some inquiries regarding its structure

While teaching myself Vue, I encountered a problem. Initially, I connected some components using new Vue ({el:" # id "}). However, when I linked the root component <div id = "app"> with new Vue ({el:" # app "}), it disrupted the existing bindings. ...

vue.jsvuejs2vue-component

Creating sophisticated TypeScript AngularJS directive

Recently, I came across a directive for selecting objects from checkboxes which can be found at this link: The issue I'm facing is that we are using TypeScript and I am unsure of how to implement the directive in TypeScript. From what I understand, ...

javascriptangularjstypescriptangular-directive

Endpoint path for reverse matching in Mongodb API

I am currently in the process of setting up a webhook system that allows users to connect to any method on my express server by specifying a method and an endpoint to listen to (for example PUT /movies/*). This setup will then send the updated movie to the ...

node.jsregexmongodbtypescript

A guide on using sinon to stub express middleware in a typescript project

I'm currently facing a challenge in writing an integration test for my express router using typescript, mocha, sinon, and chai-http. The router incorporates a custom middleware I created to validate JWT tokens present in the header. My goal is to moc ...

typescriptexpressmocha.jssinonchai-http

Uh-oh! An unexpected type error occurred. It seems that the property 'paginator' cannot be set

I am developing a responsive table using Angular Material. To guide me, I found this helpful example here. Here is the progress I have made so far: HTML <mat-form-field> <input matInput (keyup)="applyFilter($event.target.value)" placeholder ...

javascriptangularhtmltypescriptangular-material

Navigating through a typescript array containing various types and mapping each element

Is there a way to get [valueOfTypeOne, ValueOfTypeTwo] instead of (valueOfTypeOne | ValueOfTypeTwo)[] for each resulting element in this scenario? const [valueOfTypeOne, ValueOfTypeTwo] = await Promise.all( [ fetchTypeOne(), fetchTypeTwo( ...

typescriptarray-mapunion-types

Is there a way to create an interpolated string using a negative lookahead condition?

When analyzing my code for imports, I will specifically be searching for imports that do not end with -v3. Here are some examples: @ui/components <- this will match @ui/components/forms/field <- this will match @ui/components-v3 ...

javascripttypescript

"Encountering issues with running a MongoDB aggregate query involving date fields

I have been attempting to retrieve data from MongoDB using an aggregate query in Node.js for a specific date range. let date = '20230925' let year = date.slice(0, 4); let month = String(date.slice(4, 6)).padStart(2, '0'); ...

javascriptnode.jstypescriptmongodbexpress

Angular can display text on hover based on the state shown in a <td> element

Working on an Angular 7 project, I have a <td> element where I display different colors to indicate the status of a task: Red - Indicates 'Delayed' Orange - Indicates 'In progress' Grey - Indicates 'Rejected' Cu ...

angulartypescript

Error Encountered in Cypress: "Tried to wrap warn but it is already wrapped"

Objective: Utilize Cypress and Typescript to test for warnings and errors on the console. Error Encounter: An attempt was made to wrap warn, which is already wrapped. Snippet: describe.only("Unauthenticated User", () => { it("No C ...

typescriptcypress