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

Posted 2023-02-23

【中文标题】动态图像路径在 Require 函数中不起作用：找不到此相关模块

【英文标题】：Dynamic image path not working in Require function : This relative module was not found

【发布时间】：2021-11-29 09:40:21

【问题描述】：

我在过去 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')" >
            <!-- <img v-else :src="require('../assets/blogPhotos/$post.blogCoverPhoto.jpg')" > -->
         </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”并放置“编码”时，它工作正常。

【问题讨论】：

看看我的回答here

我试过你的答案（创建一个方法并返回图像路径）但它没有，也可以。

这样做后会出现什么错误？是不是和上面一样的错误？

1.您必须使用反引号与 javascript 变量进行字符串连接。 :src="require(`../assets/blogPhotos/$post.photo.jpg`)" 这将解决您没有正确路径的问题，因为您可以看到在您显示的错误中没有变量的值。 2. 我不确定它与 require 的关系如何，但我 100% 确信导入不会让您使用动态路径，因为它会在运行时之前解析路径。长话短说，导入文件并在运行时决定使用哪个文件。

@Salvino 是同样的错误。

【参考方案1】：

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

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

<template>
 <div class="blog-wrappe">            
         <img v-if="post.welcomeScreen" :src="require(`../assets/blogPhotos/$post.photo.jpg`)" >
 </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)" >
 </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>