如何在Nuxt中使用动态图片？

Answer 1

在Nuxt v3中，你可以像这样使用它

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

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

Answer 2

这是针对 Webpack 的（因此主要是 Vue2/Nuxt2）。

---

尝试这样使用

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

如Nuxt 文档中有关图像的内容所示。

Answer 3

使用 Nuxt 3 和

import img1 from ~/path/to/img1

工作正常，但我在使用打字稿时遇到错误。我认为在 Nuxt 2 中动态

:src

属性效果更好:)。

无论如何，如果您喜欢使用打字稿并且不想出现错误，请参阅下面的我的方法。

$slugify

只是我需要将属性转换为正确的图像名称的额外插件。

堆栈：

• 带有打字稿的 Nuxt 3 (docs)
• 顺风

---

插件/slugify.ts

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

组件/ImageComponent.vue

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

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

用法

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

my-awesome-image.png 必须放在

public

文件夹

---

另一种方法 - 最简单的方法！！！

您还可以使用Nuxt Image，您可以动态地传递图像：src :)

Answer 4

在 Nuxt 3 Vue 组合 API 中，您可以将图像放在公共目录或资产目录中。

如果您将使用公共目录中的图像，它可以工作，但 webpack 不会优化它们，因此这不是一个专业的解决方案。

如果您想动态使用资产目录中的图像，首先您需要使用新更改的文件名获取新的“webpack”路径。您可以通过导入图像在代码中完成此操作，如下所示：

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",
    },

作为路径使用导入的img_1，它会自动改变。

现在你可以像这样在html中使用它：

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

它适用于开发和生产。