<img src> is working but when i bind it :src it's not working
Did i did anything wrong with the binding? The binded String is totally correct because when i add it in <img src="xxx/>" it totally works but when i bind it like below it show error "404 (Page not found)"
7 Replies
<template>
<img :src="imageSrc" :class="imageStyle" />
</template>
<script setup>
import { defineProps } from '@nuxtjs/composition-api';
const props = defineProps({
imageSrc: {
type: String,
required: true
},
imageStyle: {
type: String,
default: ''
},
});
console.log(props.imageSrc);
</script>
please check this
after added the import i got an error:
[plugin:vite:import-analysis] Failed to resolve import "@nuxtjs/composition-api" from "components/Image.vue". Does the file exist?
npm install @nuxtjs/composition-api
yarn add @nuxtjs/composition-api
And After installing the package, ensure that your nuxt.config.js file is properly configured to use the Composition API plugin. Add the following configuration to your nuxt.config.js file:
export default {
plugins: ['@nuxtjs/composition-api/plugin'],
}
1. Confirm that your IDE or editor is recognizing the @nuxtjs/composition-api package. You may need to restart your development server or editor after installing the package for it to recognize the new dependencies.
2. Finally, verify that your components/Image.vue file is in the correct location and that there are no typos in the import statement.
hello
did you check again?
I'm waiting for your reply.
npm install @nuxtjs/composition-api this has problem, i received error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: nuxt-app@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/nuxt
npm ERR! nuxt@"^3.11.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer nuxt@"^2.15" from @nuxtjs/[email protected]
npm ERR! node_modules/@nuxtjs/composition-api
npm ERR! @nuxtjs/composition-api@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\Users\Wai Kit\AppData\Local\npm-cache_logs\2024-03-25T14_41_31_716Z-eresolve-report.txt
https://skirtles-code.github.io/vue-examples/guides/working-with-image-assets someone share me this link, now looking into this
Working with Image Assets | Vue Examples
Examples of Vue patterns and basic components
I think it should be :src=“props.imageSrc”
hi guys! now it works by first import the img like an object, then bind this object and pass to the <Image> component. This is weird, I can't bind the img as a string directly and pass to the component. It will be a trouble if i have a lot of images:
right now only one image i have to import to pass it as props to component. but i got few more images and yes, i'm using other images too. All of them will pass to the same component.
done it, finally it works! Thanks! so much better now