由于src属性将被Webpack替换，因此您可以执行如下require函数

子组件示例.vue

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

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

父组件.vue

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

来自Aditya Kresna Permana的answer
对我来说，它不能正常工作，因为ParentComponent.vue中的:image-url与ChildComponentExample.vue中的props不同
:image-url="require('~/assets/myimage.png')"将:image-url更改为:imageUrl（与子组件示例.vue中props相同）
结果：:imageUrl="require('~/assets/myimage.png')"
示例父组件.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>

示例子组件示例.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>

这是非常简单的，请参见示例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>

根据https://nuxtjs.org/docs/directory-structure/assets/

<img :src="require(`~/assets/img/${image}.jpg`)" />

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

这表示这种方式是正确的！什么是错误的是你的图像路径.看看如果你的pds_main. png在路径：/资产/img/

这就是我要做的。我也遇到过类似的问题，得到的解决方案是。你必须把你的图像保存在静态文件夹中，而不是资产文件夹中，然后就这样做。
在组件缩略图.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>

/后面的路径会自动转到静态文件夹。2记住把你的资源放在静态文件夹中，否则你会得到一个白色的空白div。
好吧，在资产文件夹中有资产是很好的，但是在这种情况下，你必须把这些资产放在静态文件夹中。希望这能解决你的问题

我在使用<video>组件时遇到过类似的情况。
我需要利用nuxt的assets目录，但无法将~/assets/video.mp4传递给子进程，因为它没有被编译到/_nuxt/assets/video.mp4中
为了解决这个问题，我使用了<slot>，如下所示。
https://v2.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>

当您有不同的连接埠时，例如http:127.0.0.1:8000（LARAVEL）

数据：（）=〉（{ img：process.env.baseUrl，}），

<img :src="img + product.image" :key="product.id">

根据Nuxt.JS文档资产目录结构：
在您的vue模板中，如果您需要链接到您的assets目录，请使用~/assets/your_image.png并在assets.Nuxt.JS目录结构前加上斜杠

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