waikit Posts - Answer Overflow

waikit

•Created by waikit on 3/24/2024 in #❓・help

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

14 replies

NNuxt

•Created by waikit on 3/23/2024 in #❓・help

Vue Router warning for background-image

I do not know why i keep receiving the Vue router warning on background-image and it doesnt display, when the image path is correct. <img src> able to display the image, the very same image.

<li>             
              <p
                class="bg-fixed"
                style="
                  background-image: url('../assets/images/pexels-dimitri-kuliuk-1488315.jpg');
                  background-size: cover;
                  background-position: center; 
                  height: 300px;
                  width: 100%; 
                  display: flex;
                  align-items: center; 
                  justify-content: center; 
                  color: white; 
                "
              >
                Jessica Maddinton<br />&<br />Brian Owell
              </p>
          </li>
          <li>
            <img src="../assets/images/pexels-dimitri-kuliuk-1488315.jpg" />
          </li>

<li>             
              <p
                class="bg-fixed"
                style="
                  background-image: url('../assets/images/pexels-dimitri-kuliuk-1488315.jpg');
                  background-size: cover;
                  background-position: center; 
                  height: 300px;
                  width: 100%; 
                  display: flex;
                  align-items: center; 
                  justify-content: center; 
                  color: white; 
                "
              >
                Jessica Maddinton<br />&<br />Brian Owell
              </p>
          </li>
          <li>
            <img src="../assets/images/pexels-dimitri-kuliuk-1488315.jpg" />
          </li>

2 replies

Gaming

Programming