从下一个 js 中的资产文件夹导入图像时出现此错误

Question

我已经创建了反应应用程序，它工作正常，但是当我在下一个 js 退出的 shopify 应用程序中添加所有这个应用程序文件时，我得到了这个错误，

import React, {createContext, useState} from "react";
 import bag from "../assets/bag.jpg";
export const ProductsContext = createContext();
const ProductsContextProvider = (props) => {
const [products] = useState([
{id:1, name: 'Bag', image: bag, price: 300,    status: 'hot'}
 ]);
     return (
 <ProductsContext.Provider value = {{products : [...products]}}>
  {props.children}
 </ProductsContext.Provider>
 )
 }
 export default ProductsContextProvider;

这是我的错误

┃ 错误 - ./pages/assets/bag.jpg 1:0 ┃ 模块解析失败：意外字符 '�' (1:0) ┃ 您可能需要适当的加载器来处理此文件类型，目前没有配置加载器来处理此文件。见https://webpack.js.org/concepts#loaders ┃（此二进制文件省略源代码）

这是我的 next.config.js

const { parsed: localEnv } = require("dotenv").config();
const webpack = require("webpack");
 const apiKey = JSON.stringify(process.env.SHOPIFY_API_KEY);
  module.exports = {
   webpack: (config) => {
   const env = { API_KEY: apiKey };
    config.plugins.push(new webpack.DefinePlugin(env));
   // Add ESM support for .mjs files in webpack 4
   config.module.rules.push({
     test: /\.mjs$/,
     include: /node_modules/,
      type: "javascript/auto",
    });

return config;
  },

 };

Answer 1

如果公用文件夹中有资产，则将图片路径更改为import bag from "./assets/bag.jpg";