Nuxt•7mo ago

<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)"

<script setup>

const props = defineProps({
  imageSrc: {
    type: String,
    required: true
  },
  imageStyle: {
    type: String,
    default: ''
  },
});

console.log(props.imageSrc);
</script>

<template>
  <img :src="imageSrc" :class="imageStyle" />
</template>

<script setup>

const props = defineProps({
  imageSrc: {
    type: String,
    required: true
  },
  imageStyle: {
    type: String,
    default: ''
  },
});

console.log(props.imageSrc);
</script>

<template>
  <img :src="imageSrc" :class="imageStyle" />
</template>

7 Replies

0xKube•7mo ago

<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

waikit•7mo ago

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?

0xKube•7mo ago

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.

waikit•7mo ago

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

waikit•7mo ago

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

kingtimm•7mo ago

I think it should be :src=“props.imageSrc”

waikit•7mo ago

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:

<script setup>
import imgsample from '../assets/images/simple-parisien/sample.jpg'

<template>
<Image
:imageStyle="'aspect-[4/3] p-4 object-cover'"
:imageSrc="imgsample"
>
</Image>

<script setup>
import imgsample from '../assets/images/simple-parisien/sample.jpg'

<template>
<Image
:imageStyle="'aspect-[4/3] p-4 object-cover'"
:imageSrc="imgsample"
>
</Image>

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

Gaming

Programming

<img src> is working but when i bind it :src it's not working