Question

我正试图在Nuxt展示一个资产夹的图像,但即便在src上,它还是赢得了t工作。超文本价值正确。

这里是该法典的摘录。

<div v-for="(item, index) in items" :key="index">
  <div class="item-img">
   <img :src="`../assets/imgs/${item.img}`"/>
  </div>
</div>

以上道路是正确的,因为该构成部分位于与资产夹相同的页数内。

我有像样的图像档案名称:

data() {
  return {
    images: [ image0.jpg ,  image1.jpg ],
  ...
}

There is an async function that is making an API call to fetch some items. When the API is finished a random image is added to each item.

async getMovies() {
  const data = axios.get `api_call_here`)
  const result = await data
  result.data.results.forEach((item) => {
    let randomImg = 
    this.images[Math.floor(Math.random() * 
    this.images.length)]
    item.img = randomImg
    this.items.push(item)
  })
},

我确信,图像的路径是正确的,而且这些图像存在于特定的圆顶上。我也知道这条道路是可行的,因为我可以在同一资产组合中在同一层次上展示任何单一的形象。

我认为,我尝试了在<条码>中进行干涉的每一种组合,而且没有任何效果。

最后,在我检查开发商的鱼体时,我可以看到这些元素本身正确的道路。更令人困惑的是,图像似乎占用了页上的适当空间,但它们是空的(空白空间)。

我没有想法。如果任何人能够帮助我看一看错了,我非常感谢。

Answer 1

For Vue3/Nuxt3

https://www.lichter.io/articles/nuxt3-vue3-dynamic-images/。

For Nuxt2

要求以这种方式使用

<img :src="require(`../assets/imgs/${item.img}`)" />

如Nuxt documentation 有关图像。

Answer 2

在Nuxt诉3案中,你可以这样使用。

<script setup>
import img1 from `~/path/to/img1`
</script>

<template>
  <img :src="img1" />
</template>

Answer 3

在Nuxt 3 Vue 组成你们可以把图像列入公共目录或资产目录。

如果有你们将使用公共名录的图像,但网络包将有意选择这些图像,从而不成为专业解决办法。

如果乌想要动态使用资产目录中的图像,首先你们需要一条新的“网络包”道路,新改名。你们可以通过进口形象来规范:

import img_1 from  ~/assets/fences_1.png ;
import img_2 from  ~/assets/fences_1.png ;

之后你们可以选择拥有一个能够利用这一数据进行住宿的物体。

{
      name: "name",
      photo_url: img_1,
      link_url: "/index",
    },

作为进口成象1,它将自动改变。

现在你可以在html中使用:

:style="{  background-image :  url(  + item.photo_url +  )  }"

它致力于发展和生产。

Answer 4

Worinkg with Nuxt 3 and import img1 from ~/path/to/img1 工作罚款,但我发现在打字时有错误。我认为,在Nuxt 2动态:src属性正在改善工作:

如果你想用文字做事,不希望有错误的话,我的做法如下。只是为了将属性转化为正确的形象而需要的额外的图形。

<>Stack:

Nuxt 3 with typescript (docs)
Tailwind

<>plugins/slugification.ts

export default defineNuxtPlugin(() => {
  return {
    provide: {
      slugify: (text: string) => {       
        return `${
          text
            .toLocaleLowerCase()
            .trim()
            .replace(/[^ws-]/g,   )
            .replace(/[s_-]+/g,  - )
            .replace(/^-+|-+$/g,   )
          }`
      }
    }
  }
})
// "Any String" will be converted to "any-string"

components/ImageComponent.vue

<script setup lang="ts">
const props = defineProps({
    imageSrc: {
      type: String,
      required: true,
    }
})
</script>

<template>
  <div
    :class="`bg-[url( ${props.imageSrc)} )]`"
  >
  <div>
</template>

<>Usage

<template>
  <div>
    <h1>My awesome image.png</h1>
    <ImageComponent
      class="w-16 h-16 bg-contain"
     :image-src="`${$slugify( My awesome image.png )}`"
    />
  </div>
</template?

我的辛辛醇必须放在<条码>上。夹

Another way - the easiest one!!!

您也可使用Nuxt 图像,以动态方式通过图像:src:

Answer 5

我认为,我刚才为纽特3找到了容易的解决办法。我在动态图像中使用<代码><NuxtImg>。它在发展过程中和生产过程中都发挥了作用。

Note that <NuxtImg> by default looks up files in public directory, in my case directory looked like this public > images

<NuxtImg :src=" images/  + yourImage" />

For Vue3/Nuxt3

For Nuxt2

Another way - the easiest one!!!

友情链接