:I have the following problem with a Nuxt3 application. When set an image source via template strings the build process will not render the images. Otherwise it will, when i set the image src normally. But i need it dynamically. There are teasers with different images that need to be rendered.

Everythung is working fine, e.g. props ...

The working code:

...
<img
  src="/assets/_DSC0238_E.jpg"
  :alt="props.name"
  class="w-full aspect-square object-cover"
  :class="`aspect-${props.aspectRatio}`"
/>
...

The not working code:

...
<img
  :src="`props.image`"
  :alt="props.name"
  class="w-full aspect-square object-cover"
  :class="`aspect-${props.aspectRatio}`"
/>
...

What is the way to solve this issue?

:I have the following problem with a Nuxt3 application. When set an image source via template strings the build process will not render the images. Otherwise it will, when i set the image src normally. But i need it dynamically. There are teasers with different images that need to be rendered.

Everythung is working fine, e.g. props ...

The working code:

...
<img
  src="/assets/_DSC0238_E.jpg"
  :alt="props.name"
  class="w-full aspect-square object-cover"
  :class="`aspect-${props.aspectRatio}`"
/>
...

The not working code:

...
<img
  :src="`props.image`"
  :alt="props.name"
  class="w-full aspect-square object-cover"
  :class="`aspect-${props.aspectRatio}`"
/>
...

What is the way to solve this issue?

• javascript
• nuxt.js
• vuejs3
• nuxt3.js

Share Improve this question Follow edited Aug 26, 2022 at 8:04 pkberlin asked Aug 26, 2022 at 7:46 pkberlinpkberlin 85222 gold badges1313 silver badges3232 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

In case you are using Nuxt 3 with Vite as Bundler

Set Assets posable.

export default function useAssets() {
  const svgs = import.meta.globEager('/src/assets/*.svg');
  const pngs = import.meta.globEager('/src/assets/*.png');
  const jpegs = import.meta.globEager('/src/assets/*.jpeg');

  return {
    aboutImage: svgs['/src/assets/aboutImage.svg'].default,
    search: svgs['/src/assets/search.svg'].default,
    info: pngs['/src/assets/info.png'].default,
  }; 
}

Then in any file:

<template>
    <div>
      <img :src="assets.info">
    </div>
</template>
  
<script lang="ts">
import { defineComponent } from '@vue/runtime-core';
import useAssets from '../posable/useAssets';
  
export default defineComponent({
setup() {
  const assets = useAssets();
    return {
      assets,
    };
  },
});
</script>

resource

In case (Vu3, Vue2, Nuxt 2) and bundler is Webpack

You need to require the image path, and set a dynamic src attribute by adding a colon before :src

<img
  :src="require(`~/assets/${props.image}`)"
  :alt="props.name"
  class="w-full aspect-square object-cover"
  :class="`aspect-${props.aspectRatio}`"
/>

In case (Vu3, Vue2, Nuxt 2) and bundler is Vite

const getImage = async imgName => {
  // set the relative path to assets
  const module = await import(/* @vite-ignore */ `../../assets/${imagName}`)
  return module.default.replace(/^\/@fs/, '')
}

<img
  :src="getImage(props.image)"
  :alt="props.name"
  class="w-full aspect-square object-cover"
  :class="`aspect-${props.aspectRatio}`"
/>

we can use v-bind to assign them a string value dynamically. read this

Try like this:

<img
 v-bind:src="require(`@/assets/${props.image}`)"
 :alt="props.name"
 class="w-full aspect-square object-cover"
 :class="`aspect-${props.aspectRatio}`"
/>

or for shorthand syntax

<img
 :src="require(`@/assets/${props.image}`)"
 :alt="props.name"
 class="w-full aspect-square object-cover"
 :class="`aspect-${props.aspectRatio}`"
/>