Question

我有一个使用Create-React-App工具设置的基本React应用。

我的图像文件夹中有一个图像： /src/img/logo.png

我将其包含在我的一个组件JS文件中（假设它位于/src/Login.js中），如下所示：

cap = cv2.VideoCapture(0)
num_faces = {str(n):0 for n in range(0,10)}
CAP_AGE = True

try:
    while True:

        ret, frame = cap.read()

        if CAP_AGE:
            pool = ThreadPool(processes=1)
            async_result = pool.apply_async(predict_age,(frame,))  
            age_label = async_result.get()
            CAP_AGE = False

        frame = np.flip(frame,axis=1)
        (detected_img, rects, num_faces) = adj_detect_face(frame, age_label)


        print("Found {} faces!".format(len(rects)))

        cv2.imshow('Normal', detected_img)

        if cv2.waitKey(1) & 0xFF == ord('q'):
            break

except:
  print('An Error Occured, Cannot Run The Program\nConsider Restarting the 
Kernel')
finally:
cap.release()
cv2.destroyAllWindows()

我将它们嵌入到我的代码中，如下所示：

import logo from "../img/logo.png";

当查看呈现的页面时，我看到该图像的“ src”属性具有数据URI。 如何让应用程序为此图像生成一个URL而不是数据URI？

Answer 1

为什么要使用import导入图像，您可以直接使用path或将该路径放在一个变量中，然后将其传递给src，如下所示：

 var imgUrl = "../img/logo.png"; 

 <img src={imgUrl} />

图片路径已转换为数据URI而非URL

1 个答案: