如何在nuxt项目中传递动态图片url

Question

我想将图像 url 传递给子组件，但图像没有显示。

我尝试了v-attr、:attr、:src 属性。

pages/index.vue

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

components/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。

Answer 1

由于 src 属性将被 Webpack 替换，您可以像这样执行 require 函数

ChildComponentExample.vue

<templae>
  <div>
    <img :src="imageUrl">
  </div>
</template>

<script>
export default {
  props: {
    imageUrl: {
      type: String,
      default: ''
    }
  }
}
</script>

ParentComponent.vue

<template>
  <ChildComponentExample :image-url="require('~/assets/myimage.png')" />
</template>

Answer 2

我在使用<video> 组件时遇到了类似的情况。

我需要使用 nuxt 的 assets 目录，但无法将 ~/assets/video.mp4 传递给孩子，因为它没有被编译成 /_nuxt/assets/video.mp4

为了解决这个问题，我使用了<slot>，如下所示。
https://vuejs.org/v2/guide/components-slots.html

然后我可以将String 作为src 或生成的资产路径传递。

按照此示例，您可能可以使用<Picture> 元素来实现与图像相同的结果。

子组件

<template>
  <video>
    <slot>
      <source :src="src" />
    </slot>
  </video>
</template>

<script>
export default {
  name: 'VideoComponent',
  props: {
    src: String
  }
}
</script>

父组件

<template>
  <VideoComponent src="video-1.mp4" />

  <VideoComponent>
    <source src="~/assets/video.mp4" />
  </VideoComponent>
</template>

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

Answer 3

这就是我要做的。我遇到了类似的问题并得到了解决方案。您必须将图像保存在静态文件夹中，而不是资产文件夹中，然后只需执行此操作。

在你的组件 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。

好吧，将资产放在资产文件夹中很好，但在这种情况下，您必须将它们保存在静态文件夹中。希望这能解决你的问题

Answer 4

看例子on codesandbox很简单。并确保使用正确的图像路径。

父母

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

<script>
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'
    }
  }
}
</script>

孩子

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

Answer 5

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

这表明这种方式是正确的！你的图像路径有什么问题。看看你的 pds_main.png 是否在路径中：/assets/img/

Answer 6

来自 Aditya Kresna Permana 的 answer

对我来说，它不能正常工作，因为 ParentComponent.vue 中的 :image-url 与 ChildComponentExample.vue

中的 props 不同

:image-url="require('~/assets/myimage.png')" 将 :image-url 更改为 :imageUrl（与 ChildComponentExample.vue 中的 props 相同）

结果：:imageUrl="require('~/assets/myimage.png')"

示例ParentComponent.vue：

<template>
  <div v-for="item in items" :key="item.id>
    <ChildComponent 
      :imageURL="require(`~/assets/${item.imgURL}`)" 
      :title="item.title"
      :descriptions="item.descriptions"
    />
  </div>
</template>

<script>
import ChildComponent from '~/components/ChildComponentExample.vue'

export default {
components:{
  ChildComponent,
},
data() {
    return {
      items: [
        {
          id: 1,
          imgURL: '01-1.webp',
          title: 'Title1',
          descriptions: 'Lorem ipsum',
        },
        {
          id: 2,
          imgURL: '02-1.webp',
          title: 'Title2',
          descriptions: 'Lorem ipsum',
        },
      ],
    }
  }
} 
</script>

示例ChildComponentExample.vue：

<template>
  <div>
    <div>
      <img :src="imageURL" alt="Alt text" />
      <div>
        <h3> {{ title }} </h3>
        <div> {{ descriptions }} </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    imageURL: {
      type: String,
      required: true,
      default: '',
    },
    title: {
      type: String,
      required: true,
      default: 'Title',
    },
    descriptions: {
      type: String,
      required: true,
      default: 'No descriptions',
    },
  },
}
</script>