时间戳

首页 > 解决方案 > 动态图像路径在 Require 函数中不起作用：找不到此相关模块

javascript - 动态图像路径在 Require 函数中不起作用：找不到此相关模块

问题描述

过去 2 天我在 VueJ 需要功能时遇到了一个错误。我正在尝试将道具传递给 Home 组件，然后显示图像。

主页.vue

<template>
<BlogPost :post="welcomeScreen"/>
<BlogPost :post="post" v-for="(post,index) in sampleBlogPost" :key="index"/>
</template>

<script>
import BlogPost from '../components/BlogPost.vue'
export default {
  name: 'Home',
  components:{
   BlogPost
  }
  ,
data(){
  return{
    welcomeScreen:{
      title:'Welcome',
      blogPost:'Test post',
      welcomeScreen: true,
      photo: 'coding',
    }
    ,
    sampleBlogPost: [
      {
        title: 'This is a filter title',
        blogHtml : 'This is a blog filter title',
        blogCoverPhoto: 'beautiful-stories'
      }
      ,
         {
        title: 'This is a filter title',
        blogHtml : 'This is a blog filter title',
        blogCoverPhoto: 'designed-for-everyone'
      }
    ]
  }
}
}
</script>

<style lang="scss" scoped>
.logo{
  max-width: 150px;
}
</style>

BlogPost.vue

<template>
 <div class="blog-wrappe">
     <div class="blog-content">
         <h2 v-if="post.welcomeScreen">{{post.title}}</h2>
         <h2 v-else>{{post.title}}</h2>
         <p v-if="post.welcomeScreen">{{post.blogPost}}</p>
         <p v-else>{{post.blogHtml}}</p>  
         <router-link class="link link-light" v-if="post.welcomeScreen" to="#">Login/Register <img src="@/assets/Icons/arrow-right-light.svg"></router-link>
         <router-link class="link link-light" v-else to="#">View the post</router-link>    
         <div class="blog-photo">
             
         <img v-if="post.welcomeScreen" :src="require('../assets/blogPhotos/${post.photo}.jpg')" alt="">
            <!-- <img v-else :src="require('../assets/blogPhotos/${post.blogCoverPhoto}.jpg')" alt=""> -->
         </div>
     </div>
 </div>
</template>

<script>
export default {
name: 'BlogPost',
props:['post'],
data(){
    return {
        photo: this.post.photo
    }
}
}
</script>

<style lang="scss">


</style>

我收到此错误：

未找到此相关模块：

../assets/blogPhotos/${post.photo}.jpg 在 ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./ node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader- v16/dist??ref--0-1!./src/components/BlogPost.vue?vue&type=template&id=a2b18adc"

但是当我删除“${post.photo}”并放置“编码”时，它工作正常。

标签： javascripthtmlvue.js

解决方案

以下代码会将 require 中的字符串解析为您想要的字符串。就我而言，它在大多数情况下都不起作用，因为如果完整的图像路径不同，require 将不知道要加载哪些文件。

但是由于您很幸运并且您的文件夹的路径是恒定的，因此 require 将从该文件夹（'assets/blogPhotos'）加载所有文件，并且您可以动态使用它们。

<template>
 <div class="blog-wrappe">            
         <img v-if="post.welcomeScreen" :src="require(`../assets/blogPhotos/${post.photo}.jpg`)" alt="">
 </div>
</template>

<script>
  export default {
    name: 'BlogPost',
    props: ['post'],
    data() {
      return {
        photo: this.post.photo || 'cover',
      }
    }
  }
</script>

此外，如果您的资产具有完全不同的路径，您可以这样做，这也有额外的好处，但它的额外好处是不会从该文件夹加载不必要的文件，只加载您需要的文件！

看一看：

<template>
 <div class="blog-wrappe">            
         <img v-if="post.welcomeScreen" :src="getPhotoUrl(post.photo)" alt="">
 </div>
</template>

<script>
  import coding from '../asset/blog/coding.jpg';
  import coding1 from '../pictures/photos/coding1.jpg';
  import coding2 from '../images/some/coding2.jpg';
  import coding3 from '../browse/image/coding3.jpg';

  export default {
    name: 'BlogPost',
    props: ['post'],
    methods: {
      getPhotoUrl(photoKey) {
        const availablePhotoUrlsMap = {
          coding,
          coding1,
          coding2,
          coding3
        }
        if (!availablePhotoUrlsMap.hasOwnProperty(photoKey)) {
          throw new Error(`photo with key ${photoKey} is not available`);
        }
        return availablePhotoUrlsMap[photoKey];
      }
    }
</script>

推荐阅读