How to use SRC property in <img>?
Getting error of type script error when trying SRC="/images/picture.png"
Getting HTML when trying :SRC="'/images/picture.png'"
2 Replies
Hi @Predator. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To properly use the
src property in an <img> tag within a Nuxt application, you should use the <NuxtImg> component instead of a regular <img> tag. The <NuxtImg> component is a drop-in replacement for the native <img> tag and provides additional optimization features.
Here's how you can use it:
This will result in:
NuxtImg Usage (https://image.nuxt.com/usage/nuxt-img#usage)
A few important points to note:
1. Make sure your image is placed in the correct directory. For static images, they should be in the public/ directory for Nuxt 3 to access them correctly.
2. The src attribute should be an absolute path for static images in the public/ directory.
3. If you're getting a TypeScript error, it might be because you haven't properly set up the Nuxt Image module. You can add it to your project by running:
Nuxt Image Setup (https://nuxt.com/docs/api/components/nuxt-img#setup)
4. If you need to use dynamic values for the src attribute, you can use Vue's binding syntax:
Where dynamicImagePath is a variable or computed property in your component's script section.
By using <NuxtImg>, you'll avoid the issues you're experiencing and gain additional benefits like automatic image optimization and responsive image generation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@382383501271629827> Kapa.ai is still learning and improving, please let me know how I did by reacting below.