Vue 2 Nuxt 指令图像源不起作用

Question

谁能告诉我为什么这在 Nuxt 中不起作用，或者如何修复它。 dataset.alt 属性就是 'image.svg'

el.setAttribute('src', '~/assets/images/' + el.dataset.alt)

Answer 1

答案是使用指令绑定并要求图像。完整代码供参考：

<img src="@/assets/images/light-image.svg" v-theme-image="require('@/assets/images/dark-image.svg')" />

import Vue from 'vue';
import VueCookies from 'vue-cookies'

Vue.use(VueCookies)

export const themeImage = {
    inserted: (el, binding, vnode) => {
        function init() {
            if ($cookies.get('theme') === 'dark') {
                el.setAttribute('src', binding.value);
            }
        }  
        init();
    },
    
}

Vue.directive('theme-image', themeImage);

Vue 2 Nuxt 指令图像源不起作用

Vue 2 Nuxt directive image source won't work

image

dynamic

nuxt.js