Как передать URL динамического изображения в проекте Nuxt - PullRequest
Новая
       35

Как передать URL динамического изображения в проекте Nuxt

0 голосов
/ 25 июня 2019

Я хочу передать URL-адрес дочернего компонента, но изображение не отображается.

Я пробовал v-attr, :attr, :src свойств.

страниц /index.vue 

<ThumbNail img-url="assets/img/igsim_intro.png"/>

компонентов / Thumbnail.vue 

<!-- Failed to resolve directive: attr -->
<img v-attr="imgUrl" /> 

<!-- 404 Not found: http://localhost:3000/assets/img/pds_main.png -->
<img :src="imgUrl" />

<img :attr="{src: imgUrl}" /> 

<script>
export default {
  name: "ThumbNail",
  props: {
    imgUrl: {
      type: String,
      default: ''
    }
  }
}
</script>

Я ожидаю Thumbnail.vue показывать изображения в качестве переданного URL.

Ответы [ 3 ]

0 голосов
/ 25 июня 2019

Это просто см. Пример на коды и поля .И убедитесь, что вы используете правильный путь к изображению.

parent 

    <Logo :width="350" :image-src="image"/>

    ....

    import Logo from '~/components/Logo.vue'

    export default {
      components: {
        Logo
      },
  data(){
    return{
      image:'http://4.bp.blogspot.com/-jjDh65rKHak/Vipmdm4eYtI/AAAAAAAAABU/j9iH8nRP3Ms/s1600/bist%2Bimege.jpg'
    }
  }

child 

<template>
<div>
  <svg
    :width="width"
    :height="height"
    viewBox="0 0 452 342"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g fill="none" fill-rule="evenodd">
      <path d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z" fill="#00C58E"/>
      <path d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z" fill="#108775"/>
      <path d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z" fill="#2F495E" fill-rule="nonzero"/>
    </g>
  </svg>

   <img :src="imageSrc">
 </div>
</template>

<script>
export default {
  props: {
    width: {
      type: Number,
      default: 452
    },
    height: {
      type: Number,
      default: 342
    },
    imageSrc:{
       type: String,
       required:true
    }
  }
}
</script>
0 голосов
/ 26 июня 2019

Я так и сделаю. Я столкнулся с подобной проблемой и получил решение, которое таково. Вы должны хранить ваши изображения в статической папке, а не в папке ресурсов, а затем просто сделать это.

В вашем файле thumbnail.vue компонента. 

<template>
    <div class="thumbnail-image">
      <img :src="thumbnail">
    </div>
</template>

<script>
 export default {
 props: {
    thumbnail: String
   }
  }
</script>

Теперь на ваших страницах.

Импортируйте компонент и сделайте это. 

   <template>

     <thumbnail
     thumbnail="/images.jpg" 
      />

  </template>

  <script>
  import Thumbnail from '~/components/thumbnail'

      export default {
        components: {
          Thumbnail,
             }
         }
    </script>

путь после / автоматически переходит в статическую папку. Не забудьте поместить ваши активы в статическую папку, в противном случае вы получите белый пустой div.

хорошо, хорошо иметь активы в папке активов, но в этой ситуации вы должны хранить их в статической папке. Надеюсь, что это решит вашу проблему

0 голосов
/ 25 июня 2019 
<!-- 404 Not found: http://localhost:3000/assets/img/pds_main.png -->

это указывает на правильность этого пути!что неправильно ваш путь изображения.посмотрите, находится ли ваш pds_main.png в пути: / assets / img /

...