Utilizing Vue.js to dynamically render images within a TypeScript array

Question

Utilizing Vue.js to dynamically render images within a TypeScript array

Currently, I am utilizing Vue 2 together with Typescript and have defined a type in my types.ts file:

export type SetupSliderType = {
  name: SetupSliderEnum;
  image: HTMLImageElement;
  title: keyof I18nMessages;
  component: Function;
}

No errors are detected with this setup.

Within my RegisterSetup.tsx file, I have created an Array of that particular type:

private slides: Array<SetupSliderType> = [
    {
      name: SetupSliderEnum.solutions,
      image: <img src={solutions_logo}/>,
      title: I18nMessages['account.register.side.subheading'],
      component: this.renderSlideSolutions
    },
]

I encounter the following error on the 'image' line within my Array block:

Type 'VNode' is missing the following properties from type 'HTMLImageElement': align, alt, border, complete, and 309 more.ts(2740)

types.ts(13, 3): The expected type comes from property 'image' which is declared here on type 'SetupSliderType'

How can I correctly utilize the <img> element in this syntax or where could I be going wrong?

typescript vue.js vuejs2 tsx

Answer 1

Answer №1

When utilizing JSX/TSX for element creation, you're not directly generating a DOM element. Instead, you are creating an object that will be utilized by frameworks such as Vue.js or React at a later time to generate or modify a DOM element. In your scenario, the type of object being created is a VNode, so it is recommended to use VNode instead of HTMLInputElement in your type definition:

export type SetupSliderType = {
    name: SetupSliderEnum;
    image: VNode; // <================
    title: keyof I18nMessages;
    component: Function;
}

If your intention is to specifically create an HTMLInputElement, you can achieve this using document.createElement. However, this approach would be quite uncommon when working with libraries like Vue.js or React.

Answer 2

When utilizing JSX/TSX for element creation, you're not directly generating a DOM element. Instead, you are creating an object that will be utilized by frameworks such as Vue.js or React at a later time to generate or modify a DOM element. In your scenario, the type of object being created is a VNode, so it is recommended to use VNode instead of HTMLInputElement in your type definition:

export type SetupSliderType = {
    name: SetupSliderEnum;
    image: VNode; // <================
    title: keyof I18nMessages;
    component: Function;
}

If your intention is to specifically create an HTMLInputElement, you can achieve this using document.createElement. However, this approach would be quite uncommon when working with libraries like Vue.js or React.

Utilizing Vue.js to dynamically render images within a TypeScript array

Answer №1

Similar questions

Brand new Laravel 9 setup featuring a vue 3 scaffold, but encountering issues with vite not displaying components

Implement pagination in Angular for the table

Experimenting with a function that initiates the downloading of a file using jest

Vue.js Dynamic Gallery

What is the process for sending an HTTP post request with a React/Typescript frontend and a C#/.Net backend?

Leverage advanced type deduction in Key Remapping

Extract the "_id" value from the array in the v-for loop and then store and reuse it in the data object // using vue-cli

Center the text vertically within a card using Vuetify styling

Can an array be typed in TypeScript to include all keys of an enum?

Restrictions of Vue Data Objects

Switching to Next.js

tsconfig.json: No input files were detected in the configuration file

Different types of arrays suitable for the useState hook

Removing v-for loop dynamically when content overflows

What is the best way to eliminate duplicate values within a v-for array?

Is there a straightforward method to retrieve all information from Vue.js?

What is the reason behind the slight difference between TypeScript's IterableIterator<> and Generator<> generics?

Transforming an array of objects into a structured model

Need help with Axios post in VueJs: receiving empty data

Is there an easy way to determine if an element inside a Vue component is overflowing?